flutter學習二：親測實現官網構建佈局第一個例子完整代碼

這個例子原來的地址flutter：https://flutterchina.club/tutorials/layout/

左圖是盜官網的，右圖是運行的。

              

 爲什麼要寫這個呢？因爲我看着官網的介紹，一步步打代碼，後面沒有走通，一直沒有想明白，也有挺多人在下面問完整的代碼，而且給出的完整代碼連接打不開。我也是剛剛接觸flutter，這個例子搗鼓了半天才出來效果的，所以就寫下這篇，記錄一下。 

寫完後，自己的理解是： 把佈局進行拆分分成好幾部分，分開方法實現，最後組合在一起（組合的代碼一定要放在最後）。
 一. 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) {

    Widget titleSection = new Container(//左圖中的第二個紅框部分
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start, //子項左對齊
              children: [
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0), //底部添加8像素填充
                  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'),
        ],
      ),
    );

    Column buildButtonColumn(IconData icon, String label) {//嵌套函數：把共同的屬性寫好，方便buttonSection調用
      Color color = Theme.of(context).primaryColor;

      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          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,
              ),
            ),
          )
        ],
      );
    }

    Widget buttonSection = new Container(//左圖中的第三個紅框部分
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, //平均的分配每個列佔據的行空間
        children: [
          buildButtonColumn(Icons.call, 'CALL'),
          buildButtonColumn(Icons.near_me, 'ROUTE'),
          buildButtonColumn(Icons.share, 'SHARE'),
        ],
      ),
    );

    Widget textSection = new Container(//左圖中的第四個紅框部分
      padding: const EdgeInsets.all(32), //每條邊添加32像素
      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, //文本是否應在軟換行符（例如句點或逗號）之間斷開
      ),
    );
  

    return new MaterialApp(//必須寫在後面
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('mcl'),
        ),
        body: new ListView(
          children: [    //進行組合，把前面寫的合在一起
            new Image.asset(
              'images/lake.jpg',
              width: 600.0,
              height: 240.0,
              fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }
}

二.在根目錄建立images文件夾，把準備好的lake.jpg圖片放進去

三. pubspec.yaml，增加的圖片資源，需要加進去，如下：

flutter:
  assets:
    - images/lake.jpg

 

上一篇：flutter學習一：詳解flutter安裝配置、解決The Flutter SDK instalaion is incomplete、無法將"Unblock-File”項識別爲、0x80240037 

下一篇：flutter學習三：實現登錄界面，登錄成功後跳轉到首頁，從我的界面退出登錄