flutter 布局综合示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    //风景区地址部分
    Widget addressContainer = Container(
      padding: EdgeInsets.all(32.0),
      child: Row(
        children: <Widget>[
          Expanded(
            //垂直布局
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, //次轴即水平放系在哪个左侧对齐
              children: <Widget>[
                Container(
                  padding: 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 buildBottomColumn(IconData icon, String label) {
      return Column(
        mainAxisSize: MainAxisSize.min, //垂直方向大小最小化
        mainAxisAlignment: MainAxisAlignment.center, //垂直方向对齐
        children: <Widget>[

          Icon(icon,color: Colors.lightGreen[600],),

          Container(
            margin: EdgeInsets.only(bottom: 8.0),
            child: Text(
              label,
              style: TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: Colors.lightGreen[600],
              ),
            ),
          )
        ],
      );
    }

    //按钮部分
    Widget buttonsContainer = Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          buildBottomColumn(Icons.call, '电话'),
          buildBottomColumn(Icons.near_me, '导航'),
          buildBottomColumn(Icons.share, '分享'),
        ],
      ),
    );

    //风景区介绍文本
    Widget textContainer = Container(
      //设置下边距
      padding: EdgeInsets.all(32),

      //注意文本块一定要用'''来引用起来
      child: Text(
        '''
          在明朝，南岩又进行了大规模的扩建，殿堂道房多达八百多南岩南岩(5张)间，可惜在1926年9月的一场大火，烧毁包括玄帝大殿在内的殿房二百多间。南岩的古建筑，在手法上打破了传统的完全对称的布局和模式，使其与环境风貌达到了高度的和谐统一。工匠们巧借地势，依山傍岩，使建筑有的大起大落，有的小巧玲珑；即有群体的四合院，也有单体的转角楼，产生出强烈的艺术效果。
        ''',
        //是否自动换行
        softWrap: true,
      ),
    );


    return MaterialApp(
      title: '布局综合实例',
      theme: 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/wudang.jpeg', width: 600,
              height: 240,
              fit: BoxFit.cover,),
            addressContainer,
            buttonsContainer,
            textContainer
          ],
        ),
      ),
    );
  }

}