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


相关推荐

  • 7个免费的Linux FTP客户端工具[通俗易懂]

    7个免费的Linux FTP客户端工具[通俗易懂]在Dropbox、YouSendIt、idrive以及许多这样云存储和共享工具的帮助下,我们在互联网上发送和共享大型文件变得容易起来。所有这些网站都可以帮助你在互联网上传…

    2022年6月2日
    39
  • MyBatis注释关关联关系配置

    MyBatis注释关关联关系配置

    2021年8月13日
    69
  • 开源代码网站

    开源代码网站!!!github!!!codepen!!!码云(1)到sourceforge上查找相关代码;(2)到google code上面查找具体的代码;(3)到apache网站上寻找java的相关代码;(4)直接到开源项目网站上面寻找代码;(5)到csdn等网站下载代码,偶尔会有意外的收获;(6)到图书出版社下载图书附录的代码;

    2022年7月15日
    15
  • MQTTnet[通俗易懂]

    MQTTnet[通俗易懂]近期学习了一下物联网中应用较广的MQTT协议,同时使用MQTTnet开源类库做了简单实现,因此做下笔记。注意:在实现订阅者离线再连接时,一直接受不到离线信息,需要做一下配置源码>>>GitHub//Broker设置options.MaxPendingMessagesPerClient=1000;options.EnablePersistentSessions…

    2022年6月25日
    41
  • JSON字符串转List集合操作「建议收藏」

    JSON字符串转List集合操作「建议收藏」场景:JSON字符串转List集合与List集合转JSON字符串使用的jar包是fastjson-1.2.41.jar1.JSON字符串转List集合操作publicstatic<T>List<T>parseArray(Stringtext,Class<T>clazz){try{re…

    2022年5月14日
    40
  • java中voliate的讲解

    java中voliate的讲解Java并发编程:volatile关键字解析  volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在Java5之后,volatile关键字才得以重获生机。  volatile关键字虽然从字面上理解起来比较简单,但是要用好不是一件容易的事情。由于volatile关键字是与Java

    2022年6月11日
    138

发表回复

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

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