[譯] 挑戰 Flutter 之 WhatsApp

時間 2019-11-21

標籤挑戰 flutter whatsapp 欄目硅谷简体版

原文原文鏈接

原文地址：Flutter Challenge: WhatsApp

原文做者：Deven Joshi

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者： YueYong

校對者：HCMY

Flutter Challenges 是一項嘗試利用 Flutter 從新建立特定的應用程序UI或設計的挑戰。前端

這次挑戰將嘗試 Whatsapp Android 應用程序的主界面。請注意將重點放在 UI 上而不是實際獲取消息。android

開始

WhatsApp 的主界面包括：ios

一個帶有搜索操做和菜單的 AppBar
在 AppBar 的底部有四個標籤
一個用於拍照的相機標籤
一個用於多種用途的 FloatingActionButton
一個「聊天」標籤可查看全部對話
一個「狀態」選項卡可查看全部狀態
一個「打電話」選項卡可查看全部的通話記錄

項目設置

讓咱們建立一個名爲 whatsapp_ui 的 Flutter 項目並刪除全部默認代碼，只留下一個帶有默認應用欄的空白屏幕。git

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("WhatsApp"),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            
          ],
        ),
      ),
    );
  }
}
複製代碼

The AppBar

AppBar 具備應用程序的標題，以及兩個操做：搜索和菜單。github

將其添加到 AppBar 中，後端

appBar: new AppBar(
  title: new Text("WhatsApp", style: TextStyle(color: Colors.white, fontSize: 22.0, fontWeight: FontWeight.w600),),
  actions: <Widget>[
    Padding(
      padding: const EdgeInsets.only(right: 20.0),
      child: Icon(Icons.search),
    ),
    Padding(
      padding: const EdgeInsets.only(right: 16.0),
      child: Icon(Icons.more_vert),
    ),
  ],
  backgroundColor: whatsAppGreen,
),
複製代碼

代碼結果以下：bash

如今繼續app

The Tabs

tabs（選項卡）是 AppBar 的簡單擴展，Flutter 使它們很是容易實現。less

AppBar 有一個「底部」字段，用於保存咱們的標籤：ide

bottom: TabBar(
  tabs: [
    Tab(icon: Icon(Icons.camera_alt),),
    Tab(child: Text("CHATS"),),
    Tab(child: Text("STATUS",)),
    Tab(child: Text("CALLS",)),
  ], indicatorColor: Colors.white,
),
複製代碼

此外，咱們須要一個 TabController 來實現這一點。

建立一個新的 TabController。

TabController tabController;

@override
void initState() {
  // TODO: implement initState
  super.initState();

  tabController = TabController(vsync: this, length: 4);

}
複製代碼

如今將該控制器添加到 TabBar 的「controller」字段中。

bottom: TabBar(
  tabs: [
    Tab(icon: Icon(Icons.camera_alt),),
    Tab(child: Text("CHATS"),),
    Tab(child: Text("STATUS",)),
    Tab(child: Text("CALLS",)),
  ], indicatorColor: Colors.white,
  controller: tabController,
),
複製代碼

而對於 TabBarView

body: TabBarView(
  controller: tabController,
  children: [
    Icon(Icons.camera_alt),
    Text("Chat Screen"),
    Text("Status Screen"),
    Text("Call Screen"),
  ],
),
複製代碼

如今，在轉到各個頁面以前，咱們將添加選項卡所表明的頁面。用如下方法切換腳手架的現有「正文」代碼：

body: TabBarView(
  children: [
    Icon(Icons.camera_alt),
    Text("Chat Screen"),
    Text("Status Screen"),
    Text("Call Screen"),
  ],
),
複製代碼

子項表明選項卡所用的頁面。如今整個頁面都是一個 Text 小部件。

懸浮按鈕

Floating Action Button 根據屏幕上的頁面而變化。

首先在腳手架中添加一個 FloatingActionButton。

floatingActionButton: FloatingActionButton(
  onPressed: () {
  },
  child: fabIcon,
  backgroundColor: whatsAppGreenLight,
),
複製代碼

「fabIcon」字段只存儲要顯示的圖標，由於咱們須要根據顯示的屏幕更改顯示的圖標。

要監聽選項卡選定的更改，須要給 TabController 添加一個監聽器。

tabController = TabController(vsync: this, length: 4)
  ..addListener(() {
    
  });
複製代碼

如今，當標籤控制器實現頁面已更改時，請更改 FAB 圖標。

tabController = TabController(vsync: this, length: 4)
  ..addListener(() {
    setState(() {
      switch(tabController.index) {
        case 0:
          break;
        case 1:
          fabIcon = Icons.message;
          break;
        case 2:
          fabIcon = Icons.camera_enhance;
          break;
        case 3:
          fabIcon = Icons.call;
          break;
      }
    });
  });
複製代碼

繼續，

聊天界面

聊天屏幕有一個咱們須要顯示的消息列表。要建立消息列表，咱們使用 ListView.builder() 並構造咱們的項目。

讓咱們來看看聊天界面的列表項。

最外面的小部件是一行圖標和另外一行

第二行內部是一列，包含一行和一個文本小部件。

該行具備標題和消息日期。

讓咱們構建一個聊天項模型做爲用於存儲列表項詳細信息的類。

class ChatItemModel {
  
  String name;
  String mostRecentMessage;
  String messageDate;
  
  ChatItemModel(this.name, this.mostRecentMessage, this.messageDate);
  
}
複製代碼

如今，爲簡潔起見，我省略了添加我的資料圖片。

itemBuilder: (context, position) {
  ChatItemModel chatItem = ChatHelper.getChatItem(position);

  return Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            Icon(
              Icons.account_circle,
              size: 64.0,
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment:
                          MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          chatItem.name,
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 20.0),
                        ),
                        Text(
                          chatItem.messageDate,
                          style: TextStyle(color: Colors.black45),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 2.0),
                      child: Text(
                        chatItem.mostRecentMessage,
                        style: TextStyle(
                            color: Colors.black45, fontSize: 16.0),
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      Divider(),
    ],
  );
},
複製代碼

建立第一個列表後，結果以下：