[译] 挑战 Flutter 之 Twitter

原文地址：Flutter Challenge: Twitter

原文作者：Deven Joshi

译文出自：掘金翻译计划

本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/flutter-challenge-twitter.md

译者：MeFelixWang

挑战 Flutter 将尝试在 Flutter 中重新创建特定应用的 UI 或设计。

此挑战将尝试实现安卓版 Twitter 的主页。请注意，重点将放在 UI 上，而不是实际从后端服务器获取数据。

了解应用结构

Twitter 有四个由底部导航栏控制的主要页面。

它们是：

主页（展示订阅的推文）
搜索页（搜索人员，组织等）
通知页（通知和提及）
消息页（私人消息）

BottomNavigationBar 有四个选项卡可以跳转到每个页面。

在我们的应用中将有四个不同的页面，只需点击 BottomNavigationBar 上的项目来切换页面。

建立项目

创建好 Flutter 项目（我将其命名为 twitter_ui_demo ）后，清除项目中的默认代码，只留下这些：

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 以及当前激活的页面。

开始

因为底部导航栏是用于导航的主要组件，所以我们先试着实现它。

这是 BottomNavigationBar 的样子：

因为没有应用中所需的图标，所以我们将使用 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 后，页面如下：