[譯] 挑戰 Flutter 之 Twitter

時間 2019-11-16

標籤挑戰 flutter 简体版

原文原文鏈接

原文地址：Flutter Challenge: Twitter

原文做者：Deven Joshi

譯文出自：掘金翻譯計劃

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

譯者：MeFelixWang

挑戰 Flutter 將嘗試在 Flutter 中從新建立特定應用的 UI 或設計。前端

此挑戰將嘗試實現安卓版 Twitter 的主頁。請注意，重點將放在 UI 上，而不是實際從後端服務器獲取數據。android

瞭解應用結構

Twitter 有四個由底部導航欄控制的主要頁面。ios

它們是：git

主頁（展現訂閱的推文）
搜索頁（搜索人員，組織等）
通知頁（通知和說起）
消息頁（私人消息）

BottomNavigationBar 有四個選項卡能夠跳轉到每一個頁面。github

在咱們的應用中將有四個不一樣的頁面，只需點擊 BottomNavigationBar 上的項目來切換頁面。後端

創建項目

建立好 Flutter 項目（我將其命名爲 twitter_ui_demo ）後，清除項目中的默認代碼，只留下這些：bash

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(
      body: new Center(
      ),
    );
  }
}
複製代碼

HomePage 中有一個 Scaffold，它存有咱們的 BottomNavigationBar 以及當前激活的頁面。服務器

開始

由於底部導航欄是用於導航的主要組件，因此咱們先試着實現它。app

這是 BottomNavigationBar 的樣子：less

由於沒有應用中所需的圖標，因此咱們將使用 Font Flutter Awesome package 。在 pubspec.yaml 中添加依賴項並引入

import 'package:font_awesome_flutter/font_awesome_flutter.dart';
複製代碼

到文件中。

BottomNavigationBar 的代碼以下：

bottomNavigationBar: BottomNavigationBar(items: [
  BottomNavigationBarItem(
    title: Text(""),
    icon: Icon(FontAwesomeIcons.home, color: selectedPageIndex == 0? Colors.blue : Colors.blueGrey,),
  ),
  BottomNavigationBarItem(
    title: Text(""),
    icon: Icon(FontAwesomeIcons.search, color: selectedPageIndex == 1? Colors.blue : Colors.blueGrey,),
  ),
  BottomNavigationBarItem(
      title: Text(""),
      icon: Icon(FontAwesomeIcons.bell, color: selectedPageIndex == 2? Colors.blue : Colors.blueGrey,)
  ),
  BottomNavigationBarItem(
      title: Text(""),
      icon: Icon(FontAwesomeIcons.envelope, color: selectedPageIndex == 3? Colors.blue : Colors.blueGrey,),
  ),
], onTap: (index) {
  setState(() {
    selectedPageIndex = index;
  });
}, currentIndex: selectedPageIndex)
複製代碼

將其添加到 HomePage。

請注意，當設置圖標的顏色時，咱們會檢查是否選中了圖標，而後指定顏色。在 Twitter 中，選中的圖標爲藍色，讓咱們將未選擇的圖標設置爲 blueGrey。

定義一個名爲 selectedPageIndex 的整型變量，用於存儲所選頁面的索引。在 onTap 函數中，咱們將變量設置爲新索引。用 setState() 包裹起來，由於咱們須要刷新頁面來從新渲染 AppBar。

實現的底部導航欄：

構建頁面

讓咱們構建四個基本頁面，這些頁面將在單擊相應的圖標時顯示。

創建的四個頁面（在不一樣的文件中）以下：

用戶訂閱（主頁）頁面的代碼以下：

import 'package:flutter/material.dart';

class UserFeedPage extends StatefulWidget {
  @override
  _UserFeedPageState createState() => _UserFeedPageState();
}

class _UserFeedPageState extends State<UserFeedPage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
複製代碼

相似的，咱們創建好搜索，通知和消息頁面。

回到基礎頁面中，引入這些頁面並定義成一個列表。

var pages = [
  UserFeedPage(),
  SearchPage(),
  NotificationPage(),
  MessagesPage(),
];
複製代碼

在 Scaffold 中，寫入

body: pages[selectedPageIndex],
複製代碼

它將設置 body 來展現這些頁面。

到目前爲止，MyHomePage 基礎組件的代碼以下：

class _MyHomePageState extends State<MyHomePage> {

  var selectedPageIndex = 0;

  var pages = [
    UserFeedPage(),
    SearchPage(),
    NotificationPage(),
    MessagesPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: pages[selectedPageIndex],
      bottomNavigationBar: BottomNavigationBar(items: [
        BottomNavigationBarItem(
          title: Text(""),
          icon: Icon(FontAwesomeIcons.home, color: selectedPageIndex == 0? Colors.blue : Colors.blueGrey,),
        ),
        BottomNavigationBarItem(
          title: Text(""),
          icon: Icon(FontAwesomeIcons.search, color: selectedPageIndex == 1? Colors.blue : Colors.blueGrey,),
        ),
        BottomNavigationBarItem(
            title: Text(""),
            icon: Icon(FontAwesomeIcons.bell, color: selectedPageIndex == 2? Colors.blue : Colors.blueGrey,)
        ),
        BottomNavigationBarItem(
          title: Text(""),
            icon: Icon(FontAwesomeIcons.envelope, color: selectedPageIndex == 3? Colors.blue : Colors.blueGrey,),
        ),
      ], onTap: (index) {
        setState(() {
          selectedPageIndex = index;
        });
      }, currentIndex: selectedPageIndex,),
    );
  }
}
複製代碼

如今，咱們將從新建立頁面。

建立用戶訂閱頁

頁面中有兩個元素：AppBar 和推文列表。

首先製做 AppBar。它有一張用戶我的資料圖片和一個白底黑字的標題。

appBar: AppBar(
  backgroundColor: Colors.white,
  title: Text("Home", style: TextStyle(color: Colors.black),),
  leading: Icon(Icons.account_circle, color: Colors.grey, size: 35.0,),
),
複製代碼

咱們將使用圖標而不是我的資料圖片。

從新建立的 AppBar

如今，咱們須要建立推文列表。爲此，咱們使用 ListView.builder()。

來看看列表項。

首先，咱們須要一個由 row 和 divider 組成的 column。

在 row 中，有一個 icon 和另外一個 column。

該 column 中有一個用於展現推文信息的 row，一個用於展現推文自己的 text，一個 image 和另外一個用於對推文應用操做（如評論等）的 row。

爲簡潔起見，咱們暫時拋開 image，實際上和在 row 中添加 image 同樣簡單。

return Column(
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.all(4.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.account_circle, size: 60.0, color: Colors.grey,),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 4.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Expanded(
                        child: Container(child: RichText(
                          text: TextSpan(
                            children: [
                              TextSpan(text:tweet.username, style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18.0, color: Colors.black),),
                              TextSpan(text:" " + tweet.twitterHandle,style: TextStyle(fontSize: 16.0, color: Colors.grey)),
                              TextSpan(text:" ${tweet.time}",style: TextStyle(fontSize: 16.0, color: Colors.grey))
                            ]
                          ),overflow: TextOverflow.ellipsis,
                        )),flex: 5,
                      ),
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(right: 4.0),
                          child: Icon(Icons.expand_more, color: Colors.grey,),
                        ),flex: 1,
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 4.0),
                  child: Text(tweet.tweet, style: TextStyle(fontSize: 18.0),),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Icon(FontAwesomeIcons.comment, color: Colors.grey,),
                      Icon(FontAwesomeIcons.retweet, color: Colors.grey,),
                      Icon(FontAwesomeIcons.heart, color: Colors.grey,),
                      Icon(FontAwesomeIcons.shareAlt, color: Colors.grey,),
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    ),
    Divider(),
  ],
);
複製代碼

在建立一個用於提供簡單推文的幫助類和一個簡單的 FloatingActionButton 後，頁面以下：