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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MySQL 主键详解

    MySQL 主键详解先来看下我们正常的建表代码 CREATETABLEu t idint 11 NOTNULLAUTO INCREMENT user namevarchar 40 NOTNULL passwordvarc 255 NOTNULL ageint 4 NOTNULL PRIMARYKEY id ENGINE InnoDBAUTO INCRE

    2025年9月18日
    4
  • pycharm缩进快捷方法「建议收藏」

    pycharm缩进快捷方法「建议收藏」整体缩进:鼠标拉选住代码块,按下tab键。反向缩进:鼠标拉选住代码块,按下shift+tab键

    2025年8月4日
    2
  • iframe嵌套页面拒绝访问_苹果cms模板修改导航

    iframe嵌套页面拒绝访问_苹果cms模板修改导航网站底部友链,后台设置新窗口打开,前端页面点击无效,还是当前页面打开<ahref=”{$field.url}”{$field.target}target=”_blank”title=”{$field.title}”>{$field.title}</a>在模板里面友情链接里面得A标签里面添加{$field.target}标签即可{eyou:flinktype=’text’row=’100’titlelen=’20’}<ahref=”{$fi.

    2022年10月6日
    3
  • idea正则替换小技巧「建议收藏」

    idea正则替换小技巧「建议收藏」相信很多idea开发的人都遇到过要替换某些拷贝的内容然后转换成自己的注释,但是一个一个替换又太麻烦,正则替换这时就是快速解决的办法。如下面图所示这个java类里面的属性就是mybatis的自动生成,带了很多注释,但如果想换成swagger来展示给前端看的时候就需要替换成下面的样子。想要做到这一步只需要执行下面的正则就行。首先点击打开替换窗口,idea原生快捷键按CTRL+R就行,全…

    2022年9月27日
    2
  • MySQL 分库分表,写得太好了!

    https://www.toutiao.com/a6603492496779510276/?tt_from=mobile_qq&amp;utm_campaign=client_share&amp;timestamp=1549497188&amp;app=news_article&amp;utm_source=mobile_qq&amp;iid=59568063679&amp;utm_medium=…

    2022年4月1日
    57
  • MySQL配置文件路径

    MySQL配置文件路径一、文件名和路径1.Linux中:/etc/my.cnf2.windows中:C:\ProgramData\MySQL\MySQLServer5.7\my.ini二、常见问题:1.windows下mysql配置文件my.ini的位置(1)找到“服务”,搜索MySQL(2)右击属性查看位置可以看到在可执行文件的路径是C:\ProgramData\MySQL\MySQLServer5.7\my.ini,即mysql的配置文件在该目录下。2.c盘没有ProgramData这个文件夹

    2022年5月29日
    62

发表回复

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

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