Flutter系列02：漂亮的列表UI和详情页面

thursday flutter系列上一篇中制作了一个dashboard app。本文将开发一个列表项和每一项的详情页。设计来源于Pinterest。

image.png
打开终端输入以下命令创建app并切换目录：

flutter create beautiful_list
cd beautiful_list

清除main.dart文件内容并增加以下代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primaryColor: Color.fromRGBO(58, 66, 86, 1.0)),
      home: ListPage(title: '课程'),
    );
  }

设置主要颜色为RGBO(58,66,86,1.0)，默认路由到接下来创建的ListPage。

class ListPage extends StatelessWidget {
  final String title;
  ListPage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final topAppBar =
        AppBar(elevation: 0.1, title: Text(title), actions: <Widget>[
      IconButton(
        icon: Icon(Icons.list),
        onPressed: () {},
      )
    ]);
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      appBar: topAppBar,
    );
  }
}

设置背景色Color.fromRGBO(58,66,86,1.0)和appBar为topAppBar。接下来创建topAppBar，放置代码到ListPageState类中。设置elevation，背景色，上右活动按钮和来自构造函数的标题值。为省事我们把所有代码写在build(BuildContext context)方法中，现实代码不应如此。

 class ListPage extends StatelessWidget {
  final String title;
  ListPage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final topAppBar = AppBar(
        elevation: 0.1,
        title: Text(title),
        backgroundColor: Theme.of(context).primaryColor,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.list),
            onPressed: () {},
          )
        ]);
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      appBar: topAppBar,
    );
  }
}

上述代码显示效果如下：

image.png
接下来使用BottomAppBar类制作底部导航按钮。定义一个container容器，然后指定高度和子组件命名为BottomAppBar设置颜色为Color.fromRGBO(58,66,86,1.0)子组件使用Row。BottomAppBar像众多组件一样只能有一个child子组件。Row组件包含一个children组用来定义图标按钮。IconButton显示图标并使用onPressed回调侦听按钮事件。设置mainAxisAlignment为spaceEvenly对底部图标进行排版。代码如下：

    final makeBottom = Container(
      height: 55.0,
      child: BottomAppBar(
        color: Theme.of(context).primaryColor,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              icon: Icon(Icons.home, color: Colors.white),
              onPressed: () {},
            ),
            IconButton(icon: Icon(Icons.blur_on,color: Colors.white),
             onPressed: () {},
            ),
            IconButton(icon: Icon(Icons.hotel,color: Colors.white),
             onPressed: () {},
            ),
            IconButton(icon: Icon(Icons.account_box,color: Colors.white),
             onPressed: () {},
            )
          ]
        )
      ),
    );

制做清单，包含body的scaffold。

    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      appBar: topAppBar,
      bottomNavigationBar: makeBottom,
    );

image.png
创建makeBody的container容器

    final makeBody = Container(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return makeCard;
        },
      ),
    );

这是一个包含ListView.builder的container容器。ListView.builder： 可按要求建立滚动，连续展示组件。
ItemCount为显示项数量。shrinkWrap为滚动视图扩展。scrollDirection定义滚动轴。下一章会涉及动态数据。
创建makeCard的Card组件

image.png
创建一个包含ListTile的Card组件。设置elevation为8.0，横纵margins为6.0和10.0。通过包含BoxDecoration的容器container设置颜色。

    final makeCard = Card(
      elevation: 8.0,
      margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: Container(
        decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
        child: makeListTile,
      ),
    );

创建makeListTile。一个ListTile包含以下组件：leading显示在标题前面，trailing显示在标题之后，subtitle显示在标题下边

final makeListTile = ListTile(
        contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
        leading: Container(
          padding: EdgeInsets.only(right: 12.0),
          decoration: BoxDecoration(
              border: Border(
                  right: BorderSide(width: 1.0, color: Colors.white24))),
          child: Icon(Icons.autorenew, color: Colors.white),
        ),
        title: Text(
          "Flutter入门",
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
        // subtitle: Text("中级", style: TextStyle(color: Colors.white)),

        subtitle: Row(
          children: <Widget>[
            Icon(Icons.linear_scale, color: Colors.yellowAccent),
            Text("中级", style: TextStyle(color: Colors.white))
          ],
        ),
        trailing:
            Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0));

image.png