Flutter (十三) 頁面佈局 綜合案例 ( 二 )

思路

封裝公用Widget，ListView的另一個用途：避免內容過長
代碼：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(title: '綜合 佈局', home: new LayoutDemo()));
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 風景區地址部分
    Widget addressContainer = Container(
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text('風景區地址',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                ),
                Text('湖北省十堰市丹江口市', style: TextStyle(color: Colors.grey[500]))
              ],
            ),
          ),
          Icon(Icons.star, color: Colors.red[500]),
          Text('66')
        ],
      ),
    );

    // 構建按鈕組中單個按鈕
    Column buildButtonColumn(IconData icon, String label) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min, // 垂直方向最小化
        children: <Widget>[
          Icon(icon, color: Colors.lightGreen[500]),
          Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: Text(label,
                style: TextStyle(
                    fontWeight: FontWeight.w400,
                    fontSize: 13.0,
                    color: Colors.lightGreen[600])),
          )
        ],
      );
    }

    // 按鈕組件部分
    Widget buttonsContainer = Container(
      //橫向佈局
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          buildButtonColumn(Icons.call, '電話'),
          buildButtonColumn(Icons.near_me, '導航'),
          buildButtonColumn(Icons.share, '分享')
        ],
      ),
    );

    // 風景區 文本
    Widget textContainer = Container(
        padding: const EdgeInsets.all(32.0),
        // 文本引用 '''
        child: Text(
          '''
          漢高祖五年（前202年），置武當縣。
          漢末至魏晉隋唐時期，是求仙學道者的棲隱之地。
          唐貞觀年間（627—649年），唐太宗詔武當節度使姚簡到武當山祈雨而應。敕建“五龍祠”。乾寧年間（896—897年），武當山列爲“七十二福地”第九位。
          自唐代後，武當山就得到歷代封建皇帝的重視，封號武當，使其地位崇高、名聲顯赫。
          元代至元二十二年（1285年），玄教宗師張留孫向世祖忽必烈奏報武當山後，忽必烈大信其道。大德八年（1304年），元成宗封“武當福地”。
          明代永樂十年（1412年），成祖朱棣命隆平侯張信、駙馬督尉沐昕、工部右侍郎郭璡、禮部尚書金純等率20餘萬軍民，工匠大修武當山。永樂十五年（1417年）封爲“大嶽”，高於五嶽之上。永樂二十一年（1423年），歷時12年，敕建的大嶽太和山大小宮觀33處落成。
          嘉靖三十一年（1552年）封爲“治世玄嶽”，把武當山尊爲至高無上的“皇室家廟”，以“四大名山皆拱揖，五方仙嶽共朝宗”的“五嶽之冠”的顯赫地位標名於世，被列爲道教第一名山。嘉靖三十一年（1552年），世宗令工部右侍郎陸傑提督重修武當山宮觀。
          1956年，湖北省將全山古建築羣列爲重點文物保護單位。
          1961年，金殿被列爲國家重點文物保護單位。
          1982年02月22日，紫霄宮被列爲國家重點文物保護單位。
          1983年，國務院把武當山太和宮、紫霄宮列爲全國重點宗教活動場所。
          1988年01月，“治世玄嶽”石牌坊被列爲國家重點文物保護單位。
          1996年12月15日，南巖宮被列爲國家重點文物保護單位。
          1994年12月17日，“武當山古建築羣”被聯合國列入《世界文化遺產名錄》。
          2001年07月，玉虛宮遺址被列爲國家重點文物保護單位。
          2007年05月，啓動武當山玉虛宮修繕工程。
          2012年，武當山啓動武當大興600年20餘項大型系列活動。
          2012年07月25日，五龍宮景區正式投入開發建設。
          2012年08月01日，因南水北調中線工程，遇真宮頂升工程正式啓動。
          2012年09月27日，武當山玉虛宮修繕落成。 [10-12] 

          ''',
          softWrap: true,
        ));
    return new MaterialApp(
        title: '佈局綜合案例',
        theme: new ThemeData(
          brightness: Brightness.light, //程序整體亮度
          primaryColor: Colors.lightGreen[600], //app背景色
          accentColor: Colors.orange[600], // 文本按鈕，前景色
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text(
              '武當山風景色',
              style: TextStyle(color: Colors.white),
            ),
          ),
          body: ListView(
            children: <Widget>[
              Image.asset('images/5.jpg', //引用
                  width: 640.0, height: 240.0, fit: BoxFit.cover),
              addressContainer,
              buttonsContainer,
              textContainer,
            ],
          ),
        ));
  }
}