Flutter基础组件学习–仿写美呗官方小程序界面

Flutter基础组件学习–仿写美呗官方小程序界面Flutter基础组件学习–仿写美呗官方小程序界面

大家好,又见面了,我是你们的朋友全栈君。

学会这几个基础组件就可以写了:

flutter基础组件

  • Container 就是一容器,可以设置padding,margin,圆角等

Row横向布局

Cloum垂直布局

Image图片

Text文本

ScaffoldMaterial Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

原官方小程序图:

对比flutter实现的:

会员中心页面没什么好说的,主要说一下发现页的吸顶和推荐页的banner轮播

//发现页
@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: pTabs.length,
      child: Scaffold(
        appBar: new AppBar(
          elevation: 0,
          title: _widget_barSearch(),//搜索放在appbar
        ),
        body: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrooled) {
              return <Widget>[
                _header_pic(), //顶部图片
                SliverOverlapAbsorber(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  child: SliverAppBar(
                    pinned: true,
                    forceElevated: innerBoxIsScrooled,
                    title: TabBar(
                        isScrollable: true,
                        tabs: pTabs.map((ProjectTab tab) {
                          return new Tab(
                            text: tab.text,
                          );
                        }).toList()),
                  ),
                )
              ];
            },
            body: TabBarView(
              children: pTabs.map((item) {
                return item.caseList;
              }).toList(),
            )),
      ),
    );
  }
复制代码

安卓apk下载

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/106908.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 请简述Map-Reduce算法的原理(通俗易什么成语)

    下面是我自己的微信公众号(不定期更新JAVA、大数据、个人成长等干货)1、公众号上有经典的技术电子书可以免费领2、大家有问题可以在公众号问我,只要你问了我就会回复(相互交流)也可以扫描下面二维码,加我个人微信,和我直接沟通Hadoop简介Hadoop就是一个实现了Google云计算系统的开源系统,包括并行计算模型Map/Reduce,分布式文件系统HDFS,以及…

    2022年4月13日
    36
  • nginx配置ssl证书实现https访问_ssl证书有效期

    nginx配置ssl证书实现https访问_ssl证书有效期1,登录阿里云,工作台找SSL证书或者安全下找CA证书2,点击创建证书(或购买证书),创建好以后点击证书申请、3,设置配置以及域名信息,仅填写圈住内容,其他默认即可4,随后等待一会,查看状态,是否为 已签发5,为已签发时,点击下载选择下载类型6,下载后解压文件7,上传至服务器,存放位置,先找到nginx所在位置 “/nginx/conf/”找到该位置创建“cert”把刚才解压的两个文件存放至此。8,开始nginx配置内容`server { #SSL 访问端口号为 443 li

    2022年8月19日
    3
  • dom4j解析xml字符串

    dom4j解析xml字符串与利用DOM、SAX、JAXP机制来解析xml相比,DOM4J表现更优秀,具有性能优异、功能强大和极端易用使用的特点,只要懂得DOM基本概念,就可以通过dom4j的api文档来解析xml。dom4j是一套开源的api。实际项目中,往往选择dom4j来作为解析xml的利器。先来看看dom4j中对应XML的DOM树建立的继承关系针对于XML标准定义,对应于图2-1列出的内容,do

    2022年6月21日
    37
  • spring espect XX but YY

    spring espect XX but YY注入和查找问题HSFConsumerbean,注入的是beanName=’实际接口名’,type=’HSFSpringConsumerBean’,造成Autowire时查询出来的类型不匹配MybatisMapper的autowire为什么没有类型不匹配的问题,注入时是Mapper的代理类,查询出来却直接是Mapper实现类?@autowiredpr…

    2022年10月21日
    0
  • 如何通过函数返回数组首地址

    如何通过函数返回数组首地址

    2022年3月2日
    37
  • loadrunner压测分析的两个重要指标:平均响应时间和TPS

    loadrunner压测分析的两个重要指标:平均响应时间和TPS

    2021年7月17日
    90

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号