超碰xxav热热热,在线视频久,片片日本久久97

1. 寫在前面

在上篇文章中已經(jīng)對微信我的界面的頭部進行了界面的布局搭建，還有下面列表部分沒有弄完，那么今天就繼續(xù)來寫微信實戰(zhàn)項目，包括自定義cell！

GitHub項目地址

最終效果.gif

2. 列表實現(xiàn)分析

我們先來分析一下列表List 的結(jié)構(gòu)組成，有圖片，有文字，有左邊的有右邊的，cell 之間還有灰色的間隔，還有分割線。

List組成

一個 cell 的整體肯定是一個Container，左右也是一個Container，圖片和文字可以是Container包裹一個Row，是左右的布局。

整個列表的肯定是ListView， cell 之間是上下結(jié)構(gòu)，可以使用Column來布局。

3. 自定義 cell

自定義 cell，我們要考慮擴展性，看看是否其他頁面也可以共用，我的界面的 cell 里面是有圖片、文字、箭頭。

在發(fā)現(xiàn)頁面的 cell 還有子標題和子圖片，如下：

發(fā)現(xiàn)頁面 cell 布局

那么在cell 的屬性就有標題、圖片、子標題、子圖標，箭頭，箭頭是每個 cell 都有的，就不需要設(shè)置屬性了，直接代碼里面寫就可以了。

  final String? title;//標題
  final String? subTitle;//子標題
  final String? imageName;//圖標
  final String? subImageName;//子圖標
  //構(gòu)造方法
  const MineCell({this.title, this.subTitle, this.imageName, this.subImageName});

在構(gòu)造方法里面用{ }括起來的就是可選的參數(shù)，？號修飾是表示空安全，可以為 null，就是類型于Swift里面的可選的意思，使用的時候要用！號修飾，表示不為 null 是有值的，下面代碼里面會有使用到。

cell要響應(yīng)點擊的事件，那么就需要一個GestureDetector來包裹起來，并且實現(xiàn)點擊的方法。

cell 代碼的大體結(jié)構(gòu)

left

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

SizedBox可以創(chuàng)建一個固定大小的框，具有固定寬高的組件，可以設(shè)置寬高，這里是用來分割、占位用的。

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,
                  )
                ],
              ),
            )

現(xiàn)在就實現(xiàn)了 cell 的自定義了，那么接下來就是列表的整體實現(xiàn)了。

4. ListView 實現(xiàn)列表

我們把自定義的 cell的頭文件導(dǎo)入到我的界面mine_page 里面。大體代碼結(jié)構(gòu)如下：

列表代碼結(jié)構(gòu)

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來實現(xiàn)，cell 底部的間隙，這里的實現(xiàn)是：

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

cell底部的分割線是沒有占滿屏幕寬度的，我們可以使用Row左右布局，左邊固定一個寬度和高度的Container，右邊固定一個高度Container，那么寬度就自動拉滿了，然后設(shè)置一下顏色就 OK 了。