flutter實戰項目，教你使用flutter打造仿微信app頁面！

時間 2020-03-05

標籤 flutter 實戰項目使用打造微信 app 頁面简体版

原文原文鏈接

flutter_wechat

源碼地址:github.com/ding-zou/fl…git

🔥A flutter app which clones wechat！這是一個仿照微信樣式基於flutter實現的app，還在繼續完善中，歡迎提意見github

包含了flutter中基本全部的組件，適合以此項目進行flutter學習。數組

頁面展現

主要功能實現QA

1. 通信錄頁右側字母表

Q：如何實現列表滾動而字母表不滾動微信

A：由於通信錄列表是能夠滾動的，因此咱們想到使用Stack來把字符表放在固定位置而不會由於ListView滑動而滑動。markdown

Q：如何控制字母表滾到對應位置觸發外部輪廓圓？app

A：首先咱們使用的是BoxDecoration實現的外部輪廓，而後咱們須要一個標誌來控制其輪廓的顯示，其實咱們經過控制輪廓的顏色就行了，咱們定義了一個顏色，滾動到時經過setState來改變顏色，就能夠實現滾動是變化。ide

Q：如何肯定對應字母的對應ListView的位置？學習

A：咱們知道構建每個ListTile時它的高度都是同樣的，咱們就能夠經過計算來獲得每一個字母在ListView中的位置。咱們模擬接收到數據，咱們用一個map保存對應字母對應所在的位置，好比字母a所在爲110，而後a有10個通信錄Item，那麼b的位置就是a的位置加上10*每一個Item的高度。此外咱們每一個字母還有一行顯示，因此咱們還要加上這行的高度。ui

2. 搜索欄

Q：怎麼經過TextField實現自定義搜索欄？spa

A：咱們經過設置TextField的裝飾屬性decoration，傳入一個InputDecoration控件，裏面咱們能夠設置不少屬性來自定義顯示。還不能知足你的狀況的話能夠本身在外層進行包裝。

decoration: InputDecoration(
  icon: Container(
    padding: EdgeInsets.only(left: 10),
    child: Icon(Icons.search,
                size: 23, color: Colors.grey[400])),
  contentPadding: EdgeInsets.fromLTRB(0, 0, 0, 13),
  border: InputBorder.none,
  hintText: widget.hint,
  hintStyle: TextStyle(
    fontSize: 15,
  )),
複製代碼

3.主頁右上角點擊按鈕彈窗

Q：如何實現這樣的彈窗？

A：咱們能夠經過官方提供的PopupMenuButton來實現，能夠經過如下這種方式構建

PopupMenuButton(
  offset: Offset(0,70),
  color: Color(0xff4c4c4c),
  itemBuilder: (BuildContext context) {
    return <PopupMenuItem<int>>[
      /// 設置你的彈窗Item數組
      PopupMenuItem(
        child: _popupItem(0xe69e,0),
        value: 0,
      ),
    ];
  },
  /// 設置按鈕的Icon 是一個Widget類型的
  icon: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10),
      border: Border.fromBorderSide(BorderSide(
        color: Colors.black87,
        style: BorderStyle.solid))),
    child: Icon(
      Icons.add,
      size: 19,
      color: Colors.black87,
    ),
  ))
複製代碼

Q：如何設置彈窗出現的位置？它遮住了其餘控件怎麼辦？

A：咱們能夠經過它的offset屬性傳入一個Offset偏移量就行了

4.圖片紅點以及導航欄紅點

Q：怎麼實現紅點顯示在圖片上？

A：咱們能夠經過萬能的Stack來實現，咱們能夠用Container包裹，設置一個較大的寬和高，而後裏面放上圖片，再經過Positioned把小紅點放在右上角

參見下面實現方式：

Container(
  height: 43,
  width: 43,
  child: Stack(children: <Widget>[
    Positioned(
      left: 0,
      bottom: 0,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Image.network(
          imgUrl 
          fit: BoxFit.cover,
          height: 40,
          width: 40,
        ))),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          border: Border.fromBorderSide(
            BorderSide(width: 1, color: Colors.red[600]))),
        child: Container(
          color: Colors.red[600],
          height: 6,
          width: 6,
        ),
      ),
    )
  ]),
)
複製代碼