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

dzou發表於2020-03-03
FlutterAPP

flutter_wechat

原始碼地址:github.com/ding-zou/fl…

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

包含了flutter中基本所有的元件，適合以此專案進行flutter學習。

頁面展示

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

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

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

主要功能實現QA

1. 通訊錄頁右側字母表

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

A：因為通訊錄列表是可以滾動的，所以我們想到使用Stack來把字元表放在固定位置而不會因為ListView滑動而滑動。

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

A：首先我們使用的是BoxDecoration實現的外部輪廓，然後我們需要一個標誌來控制其輪廓的顯示，其實我們通過控制輪廓的顏色就好了，我們定義了一個顏色，滾動到時通過setState來改變顏色，就可以實現滾動是變化。

Q：如何確定對應字母的對應ListView的位置？

A：我們知道構建每一個ListTile時它的高度都是一樣的，我們就可以通過計算來得到每個字母在ListView中的位置。我們模擬接收到資料，我們用一個map儲存對應字母對應所在的位置，比如字母a所在為110，然後a有10個通訊錄Item，那麼b的位置就是a的位置加上10*每個Item的高度。此外我們每個字母還有一行顯示，所以我們還要加上這行的高度。

2. 搜尋欄

Q：怎麼通過TextField實現自定義搜尋欄？

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,
        ),
      ),
    )
  ]),
)
複製程式碼

Q：flutter提供的*BottomNavigationBar*怎麼實現紅點？

A：你可以使用BottomNavigationBar來使用上述方式構建紅點，分別設定icon和activeIcon

DONE

  • 首頁

  • 通訊錄頁(通訊錄頁字母表跳轉)

  • 發現頁

  • 我的頁面

  • 搜尋頁

  • 聊天頁

TODO

  • 朋友圈頁面
  • 我的資料卡片頁
  • 設定頁
  • 支付頁
  • 多語言

原始碼地址:github.com/ding-zou/fl…

相關文章