阅读 7980
【Flutter】微信项目实战【03】我的界面搭建(下)

【Flutter】微信项目实战【03】我的界面搭建(下)

「这是我参与11月更文挑战的第9天,活动详情查看:2021最后一次更文挑战

📝【Flutter】学习养成记,【程序员必备技能】

📔【Flutter】微信项目实战!

1. 写在前面

上篇文章中已经对微信的界面的头部进行了界面的布局搭建,还有下面列表部分没有弄完,那么今天就继续来写微信实战项目,包括自定义cell

  • 基础语法合集

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的方法与箭头函数

【Flutter】Dart的方法中的可选参数、方法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和对象

【Flutter】Dart中的构造函数

【Flutter】Dart的工厂构造方法&单例对象&初始化列表

【Flutter】Dart的类方法和对象操作符

【Flutter】Dart中的继承

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗?

  • [基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

【Flutter】基础组件【04】Row/Column

【Flutter】基础组件【05】Image

【Flutter】基础组件【06】Icon

【Flutter】基础组件【07】Appbar

【Flutter】基础组件【08】BottomNavigationBar

【Flutter】基础组件【09】Button

  • [项目实战合集]

【Flutter】微信项目实战【01】基本框架搭建

【Flutter】微信项目实战【02】我的界面搭建(上)

GitHub项目地址

最终效果.gif

2. 列表实现分析

我们先来分析一下列表List 的结构组成,有图片,有文字,有左边的有右边的,cell 之间还有灰色的间隔,还有分割线。

List组成

一个 cell 的整体肯定是一个Container,左右也是一个Container,图片和文字可以是Container包裹一个Row,是左右的布局。

整个列表的肯定是ListViewcell 之间是上下结构,可以使用Column来布局。

3. 自定义 cell

自定义 cell,我们要考虑扩展性,看看是否其他页面也可以共用,的界面的 cell 里面是有图片、文字、箭头。

发现页面的 cell 还有子标题和子图片,如下:

发现页面 cell 布局

那么在cell 的属性就有标题、图片、子标题、子图标,箭头,箭头是每个 cell 都有的,就不需要设置属性了,直接代码里面写就可以了。

  final String? title;//标题
  final String? subTitle;//子标题
  final String? imageName;//图标
  final String? subImageName;//子图标
  //构造方法
  const MineCell({this.title, this.subTitle, this.imageName, this.subImageName});

复制代码

在构造方法里面用{ }括起来的就是可选的参数,号修饰是表示空安全,可以为 null,就是类型于Swift 里面的可选的意思,使用的时候要用号修饰,表示不为 null 是有值的,下面代码里面会有使用到。

cell要响应点击的事件,那么就需要一个GestureDetector来包裹起来,并且实现点击的方法。

cell 代码的大体结构

  • left
//left
            Container(
              padding: const EdgeInsets.all(10),
              child: Row(
                children: <Widget>[
                  Image(
                    image: AssetImage(imageName!),
                    width: 20,
                  ),
                  SizedBox(
                    width: 15,
                  ),
                  Text(title!),
                ],
              ),
            )
复制代码

SizedBox可以创建一个固定大小的框,具有固定宽高的组件,可以设置宽高,这里是用来分割、占位用的。

  • right
Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: <Widget>[
                  subTitle != null ? Text(subTitle!) : const Text(''),
                  subImageName != null
                      ? Image(
                    image: AssetImage(subImageName!),
                    width: 12,
                  )
                      : Container(),
                  //箭头
                  const Image(
                    image: AssetImage('images/icon_right.png'),
                    width: 14,
                  )
                ],
              ),
            )
复制代码

现在就实现了 cell 的自定义了,那么接下来就是列表的整体实现了。

4. ListView 实现列表

我们把自定义的 cell 的头文件导入到我的界面mine_page 里面。大体代码结构如下:

列表代码结构

  • ListView 代码如下

........部分代码省略............

children: [
                    const SizedBox(height: 10,),
                    const MineCell(
                      imageName: 'images/微信支付.png',
                      title: '支付',
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    const MineCell(
                      imageName: 'images/微信收藏.png',
                      title: '收藏',
                    ),
                    //cell 底部分割线
                    Row(
                      children: <Widget>[
                        //左右
                        Container(width: 50, height: 0.5, color: Colors.white),
                        //Container(height: 0.5, color: Colors.grey)
                      ],
                    )
                    
  ........部分代码省略............
  
                ]
复制代码

cell之间大的间隙我们使用SizedBox来实现,cell 底部的间隙,这里的实现是:

Row(
   children: <Widget>[
   //左右
  Container(width: 50, height: 0.5, color:  Colors.white),
  Container(height: 0.5, color: Colors.grey)
        ],
 )
复制代码

cell底部的分割线是没有占满屏幕宽度的,我们可以使用Row左右布局,左边固定一个宽度和高度的Container,右边固定一个高度Container,那么宽度就自动拉满了,然后设置一下颜色就 OK 了。

最终效果.gif

Flutter的布局还是很方便的,也很灵活,有兴趣的老铁自己动手去实现一下吧!

GitHub项目地址

5. 写在后面

关注我,更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的,可以来一波 收藏+关注,以免你下次找不到我😁🌹

🌹欢迎大家留言交流,批评指正,转发请注明出处,谢谢支持!🌹

文章分类
iOS
文章标签