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


相关推荐

  • centos7 rabbitmq安装_阿里云 k8s

    centos7 rabbitmq安装_阿里云 k8s我这里使用三台阿里云服务器搭建RabbitMQ集群。1.首先使用cat/etc/hostname查看自己这三台云服务器的名字。当然也可以按照自己的想法修改,使用vim/etc/hostname就可已修改,如何进行编辑和保存,可以百度搜一下。保存之后,需要重启云服务器才能生效。图中1和2都是hostname,修改过/etc/hostname之后,必须重启之后,1和/etc/hostname的值才能一样。2.使用vim/etc/hosts填写下边的格式的内容:xxx.xxx.xxx.xxxh

    2022年9月10日
    3
  • 数组和集合的区别有哪些?

    数组和集合的区别有哪些?更多免费教学文章请关注这里一 数组数组是 java 语言内置的数据类型 他是一个线性的序列 所有可以快速访问其他的元素 数组和其他语言不同 当你创建了一个数组时 他的容量是不变的 而且在生命周期也是不能改变的 还有 JAVA 数组会做边界检查 如果发现有越界现象 会报 RuntimeExcep 异常错误 当然检查边界会以效率为代价 二 集合 JAVA 还提供其他集合 list map set 他们

    2025年7月8日
    2
  • python 高中信息技术 会考_今年9月,8年级将新增Python课程,3-9年级以及新高一的信息技术课都有变化···…[通俗易懂]

    python 高中信息技术 会考_今年9月,8年级将新增Python课程,3-9年级以及新高一的信息技术课都有变化···…[通俗易懂]原标题:今年9月,8年级将新增Python课程,3-9年级以及新高一的信息技术课都有变化···浙江省中小学信息技术课9月换新教材,新增PPT、H5、Python、大数据……等内容。浙江消息,今年9月份开始的新学期,三到九年级信息技术课将同步替换新器材。其中,新初二将新增Python编程课程内容。新高一信息技术编程语言由VB替换为Python,大数据、人工智能、程序设计与算法按照教材规划五六…

    2022年5月17日
    111
  • 腾讯云服务器配置ssl,腾讯云服务器SSL证书申请及配置[通俗易懂]

    腾讯云服务器配置ssl,腾讯云服务器SSL证书申请及配置[通俗易懂]最近在研究微信小程序,服务端需要部署在一台服务器上,查看了一下,腾讯云在搞活动,就申请了腾讯云的服务器,但是微信小程序访问需要用https协议才能请求,于是研究了一下如何申请及配置ssl证书。本人穷逼一枚,一向以节俭,所以申请了一个免费证书。申请步骤如下:1、登录证书申请页面https://console.qcloud.com/ssl/apply2、输入必要信息,通用名称及申请邮箱,点击下一步这一…

    2025年9月2日
    6
  • C# 调用java Webservice「建议收藏」

    C# 调用java Webservice「建议收藏」usingMicrosoft.CSharp;usingSystem;usingSystem.CodeDom;usingSystem.CodeDom.Compiler;usingSystem.Collections.Generic;usingSystem.IO;usingSystem.Linq;usingSystem.Net;usingSystem.Text;us

    2022年10月16日
    2
  • 漫画什么是分布式事务_分布式事务框架

    漫画什么是分布式事务_分布式事务框架点击上方“程序员小灰”,选择“置顶公众号”有趣有内涵的文章第一时间送达!————— 第二天 —————————————————假如没有分布式事务在一系列微服务系统当中,假如不存在分布式事务,会发生什么呢?让我们以互联网中常用的交易业务为例子:上图中包含了库存和订单两个独立的微服务,每个微服务维护了自己的数据库。在交易系统的业务逻辑中,一个商品在下单之前需要先调用库存服务,进行扣除库存,再调用订

    2025年8月9日
    2

发表回复

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

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