iOS Flutter 开发基础（二）

简书内容都是个人的知识点整理和笔记。

再上一节中，我们了解了在MAC上如何搭建flutter的开发环境并通过代码实现了一个简单的界面，下面将会实现一些稍微复杂一点的界面。

最终实现界面

创建布局

首先我们新建一个项目，命名为“flutter_layout_demo”。然后我们给项目创一个名为“images”的文件夹，将想要展示的图片素材放入文件夹中，然后修改pubspec.yaml文件，使整个项目能够识别到你添加的图片素材。

flutter:
  uses-material-design: true
  assets:
    - images/lake.jpg

为了实现这个布局，我们需要在这个界面中设置四个column，分别用于展示大图(Big Picture)、标题(Title Section)、按钮(Button Section)和正文文本(Text Section)。

1.展示大图

首先我们在需要在body的children中展示我们的大图文件。

 children: <Widget>[
          new Image.asset(
            'images/lake.jpg',
             height: 240.0,
             fit: BoxFit.cover,
           ),//Big Picture

2.实现标题

这之后我们需要实现的是标题colunm。这一栏中含有标题正文、显示地址的小标题以及后面跟着收藏数量字符的图标Icon。

标题栏

我们需要实现的这个Widget命名为titleSection。实现的代码如下：

    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        children: <Widget>[
          new Expanded(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Container(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: new Text('Oeschinen Lake Campground', style: new TextStyle(fontWeight: FontWeight.bold,),),
                  ),
                  new Text('Kandersteg, Switzerland', style: new TextStyle(color: Colors.grey[500],),),
                ],
              ),
          ),
          new Icon(Icons.star, color: Colors.red[500],),
          new Text('41'),
        ],
      ),
    );

我们在titleSection中定义了一个含有三个子控件的Row。分别是Expanded、Icon和Text。
Expanded控件可以让他的子控件在剩余的控件中扩展。而在titleSection中Expanded是含有容器(Container)和文本(Text)的Column。

我们在titleSection中使用了预置的图标素材，所以记得在pubspec.yaml设置uses-material-design为：true。

3.摆放按钮

再然后就是实现buttonSection。我们可以在ThemeData中定义我们的基本颜色。

      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),

这样就可以通过Theme.of(context).primaryColor来获取到主题颜色了，避免了重复的颜色写入。
因为三个按钮都是上部分为Icon图标下部分为标题的控件。因此我们定义一个名为buildButtonColum的返回Column对象的方法，其内部实现代码如下：

    Column buildButtonColunm(IconData icon,String label){
      Color color = Theme.of(context).primaryColor;
      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Icon(icon,color: color,),
          new Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              style: new TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: color,),
            ),
          ),
        ],
      );
    }

在该Column中含有图标Icon和容器Container两个子控件，定义通过图标和文本来初始化它。
这之后就是实现我们的buttonSection了。

Widget buttonSection = new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          buildButtonColunm(Icons.call, 'CALL'),
          buildButtonColunm(Icons.near_me, 'ROUTE'),
          buildButtonColunm(Icons.share, 'SHARE'),
        ],
      ),
    );

在buttonSection中我们分别定义打电话、导航和分享三个buttonColunm。

4.显示文本

实现textSection就和大图一样简单了。

    Widget textSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Text(
          '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
        ''',
        softWrap: true,
      ),
    );

最后就是我们把刚才实现的几个栏目合并放入body中显示了。

body: new ListView(
  children: <Widget>[
    new Image.asset('images/lake.jpg', height: 240.0, fit: BoxFit.cover,),
    titleSection,
    buttonSection,
    textSection,
    ],
)

几个简单而基本的section实现也更加深了我们的对flutter中布局的认识，下面就是对布局更深入的认识和总结了。
这个是本小节DEMO的地址：Github