flutter 基础布局（垂直，水平，动态）

理论不多哔哔，直接上代码：

import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(Myapp()); //main函数运行方法入口
}

class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: MyAppDemo03(),
      ),
    );
  }
}

/**
 *  布局
 * 1.垂直布局
 * 2.垂直图文布局
 * 3.水平布局
 * 4.动态布局
 */

//垂直列表
class MyAppDemo03 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: ListView(
      // 创建列表元素
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.phone), //显示的图标 默认左边
          title: Text(
            //一级标题
            "这是一个listView",
            style: TextStyle(fontSize: 25.0),
          ),
          subtitle: Text(
            //二级标题
            "哗啦啦--哗啦啦",
            style: TextStyle(fontSize: 18.0),
          ),
        ),
        ListTile(
          title: Text(
            "这是一个listView",
            style: TextStyle(fontSize: 20.0),
          ),
          subtitle: Text("哗啦啦--哗啦啦"),
        ),
        ListTile(
          leading: Icon(Icons.ac_unit),
          title: Text(
            "这是一个listView",
            style: TextStyle(fontSize: 30.0),
          ),
          subtitle: Text("哗啦啦--哗啦啦"),
          trailing: Icon(Icons.ac_unit), //在后面添加图标
        ),
        ListTile(
          title: Text(
            "这是一个listView",
            style: TextStyle(fontSize: 28.0),
          ),
          subtitle: Text("哗啦啦--哗啦啦"),
          trailing: Icon(Icons.access_alarm_outlined), //在后面添加图标
        ),
      ],
    ));
  }
}

/**
 * 水平列表
 */

class MyAppDemo033 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //返回一个容器
      //设置容器的基本属性
      height: 200.0,
      margin: EdgeInsets.all(5),
      //创建一个ListView
      child: ListView(
        scrollDirection:
            Axis.horizontal, //Axis.horizontal 水平列表 Axis.vertical 垂直列表
        // 创建列表元素
        children: <Widget>[
          //嵌套容器
          Container(
            width: 180.0,
            color: Colors.amber,
            //创建列表
            child: ListView(
              children: <Widget>[
                Image.network(
                    "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg"),
                SizedBox(height: 16.0),
                Text(
                  "这是一个文本信息",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 30.0, color: Colors.blue),
                )
              ],
            ),
          ),

          //第二个嵌套容器
          Container(
            width: 180.0,
            color: Colors.deepOrange,
          ),

          //第三嵌套容器
          Container(
            width: 180.0,
            color: Colors.deepPurpleAccent,
          )
        ],
      ),
    );
  }
}

/**
 * 动态列表（动态循环数据）
 */
class MyAppDemo0333 extends StatelessWidget {
  //创建一个List集合
  List<Widget> _getData() {
    // List<Widget> list = new List();
    List<Widget> list = List.empty(growable: true);
    for (int i = 0; i < 20; i++) {
      list.add(ListTile(title: Text("我是$i列表")));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(children: this._getData());
  }
}