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


相关推荐

  • Qt 音乐播放器「建议收藏」

    Qt 音乐播放器「建议收藏」一、实现功能:1、读取歌曲文件,实现歌曲的播放;2、采用QtDesigner实现歌曲的暂停和播放,歌曲名列表和当前播放歌曲名的显示,上一曲和下一曲歌曲的更换,播放模式的设置,音量的改变,歌曲播放进度的改变;3、读取歌词文件,实现歌词的显示;4、利用QSetting增加歌曲文件和歌词文件的设置功能;5、界面汉化;6、使用CSS进

    2022年4月30日
  • vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」

    vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」一、@input(或者是v-on:input)使用:&lt;inputtype="text"placeholder="通过乘车人/订单号查询"v-model="inputVal"v-on:input="search"value=""/&gt;适用于实时查询,每输入一个字符都会触发该事件。如图:二、@keyup.enter该事件与v-on:input事件的区别在于:i

    2022年4月30日
  • Redis的五种数据结构的底层实现原理

    Redis的五种数据结构的底层实现原理

    2021年4月10日
  • linux生成initramfs,Linux启动过程与initramfs

    linux生成initramfs,Linux启动过程与initramfsLinux启动过程概述这里先简单列一下Linux操作系统启动的全过程:按下电脑的电源键后,电脑通电,BIOS启动;BIOS读取硬盘的MBR,运行启动扇区中的代码,旧系统往往需要自己写启动扇区,而新系统基本上由专用的启动软件接管了,在Linux世界中,目前都是用的Grub2。由于启动扇区空间太小,放不下太复杂的代码逻辑,所以Grub2也使用了多阶段启动的策略;Grub2负责将操作系统…

    2022年8月11日
  • 校园宿舍ADSL共享上网方案浅析

    校园宿舍ADSL共享上网方案浅析

    2022年3月12日
  • 程序员 你读过的书,藏着自己的命运-技术类(二)

    做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!=================================================对人工智能感兴趣的伙伴,分享一个我朋友的人工智能教程。零基础!通俗易懂!风趣幽默!大家可以看看是否对自己有帮助,点击这里查看教程。===========================================…

    2022年2月28日

发表回复

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

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