Flutter基础篇01--实现一个综合页面

实现下面这个综合页面demo

界面分析：

1、可拆分四个模块：图片模块、地址模块、按钮模块、文本模块
2、由于文本模块很可能会很长，为防止文字遮挡，需要把这四个模块放到垂直布局ListView 进行滚动布局。

步骤：

1、图片模块

图片 的宽度尽量大一些，填充方式使用 BoxFit.cover模式，这样可以填充整个父容器。

Image.asset(
  'images/wudang.jpeg',
  width: 600,
  height: 240,
  // 图片填充整个父容器
  fit: BoxFit.cover,
),

2、地址模块

1、垂直方向上图片模块下面紧接着是地址模块。
2、横向上 看需要使用一个水平排列的组件 Row，水平方向有三个 Child，分别为左侧文本区域 、 图标、数字区域 。
3、左侧文本区域继续细拆，需要用一个垂直布局的组件 Column，上下各放一个文本组件即可 。
4、图标、数字是两个组件。
5、用 Expanded组件来包裹地址组件以达到填充地址和图标之间的空隙。

child: Row(
  children: <Widget>[
    Expanded(
      child: Column(
        // 左侧文本区域
        children: <Widget>[
          Container(
            // 左侧文本区域-上面部分
            //左侧文本区域-下面部分
          ),
        ],
      ),
    ),
    //图标
    //数字
  ],
),

3、按钮模块

1、垂直方向上在地址模块下边。
2、在横向上用 Row 组件排列 三个按钮 。

Widget buttonsContainer = Container(
  child: Row(
  // 水平方向对齐方式
  mainAxisAlignment 
  children: <Widget>[
    // 构建三个按钮
    buildButtonColumn
    ],
  ),
);

3、每个按钮在纵向上用 Column 排列，上面为按钮图标 ，下面为按钮文本 。

Column buildButtonColumn (IconData icon, String label) {
  return Column(
    //按钮界面渲染图标 +文本
  )
)

4、文本模块

只需要一个Text文本即可。

child: Text(
    '''
    文本内容
    ''',
    softWrap: true,
    style: TextStyle(fontSize: 15),
),

5、最后组装所有布局

return new MaterialApp(
    title// 标题 
    theme// 自定义主题,
    home: Scaffold(
        appBar: AppBar(
        body: ListView( 
            children: <Widget>[
                // 景区图片
                // 风景区地址
                // 按钮组
                // 风景区介绍文本 
            ],
        ),
    ),
);

完整代码