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)
    ],);
  }
}