flutter 基礎佈局 四 原

MaterialApp  主題專用

Material  一張白紙

Scaffold  腳手架 有導航欄 有body

crossAxisAlignment: CrossAxisAlignment.center, 文字對齊方式

MainAxisAlignment.spaceEvenly 平均分佈

ListView中加載順序 垂直方向 對比column 他可以滾動

import 'package:flutter/material.dart';

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

class Demo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: '123',
        home: new Scaffold(
          body: new ListView(children: <Widget>[
            new Image.asset('assets/lake.jpg'),
            new MyTitleBar(),
            new MyButton(),
            new MyText(),
          ],)
        ));
  }
}

class MyTitleBar extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.all(32.0),
        child: new Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new Expanded(
            child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Text("今天天氣會很好"),
            new Text(
              "陰到多雲，PM2.5",
              style: TextStyle(color: Colors.black26),
            )
          ],
        )),
        new Icon(Icons.star),
        new Text("14")
      ],
    ));
  }
}


class MyText extends StatelessWidget{
  Widget build(BuildContext context){
    return new Container(padding:new EdgeInsets.all(32.0),child: new Text('由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        '由於構建每個列的代碼幾乎是相同的，因此使用一個嵌套函數，如buildButtonColumn，它會創建一個顏色爲primary color，包含一個Icon和Text的 Widget 列。'
        ''
        ''),);
  }
}

class MyButton extends StatelessWidget{

  Widget build(BuildContext){
    return new Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
      button(Icons.mode_comment,'評論'),
      button(Icons.mode_comment,'評論'),
      button(Icons.mode_comment,'評論'),
    ],);
  }


  Widget button(icon,title){
    return new Column(children: <Widget>[
      new Icon(icon),
      new Text(title)
    ],);
  }
}