Flutter布局尝试

官方的例子实现

1. 实现图片模块

Widget imageSection = new Container(
      padding: EdgeInsets.only(top: 8),
      child: Image.asset('images/timg.jpeg',
        height: 240.0,
        fit: BoxFit.cover,
      ),
    );

2. 实现标题模块

Widget titleSection = new Container (
        padding: EdgeInsets.all(32.0),
        color: Colors.white,
        child: Row(
          children: [
            // 左半部分上下标题/副标题
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(// 创建一个容器,标题在容器中设置下边距,也可以在外部设置边距
                    padding: EdgeInsets.only(bottom: 8.0),
                    child: Text(
                      "我是大标题",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  Text(
                    '我是一个挺长的副标题',
                    style: TextStyle(
                      color: Colors.grey,
                    ),
                  )
                ],
              ),
            ),
            // 右边小星星
            Icon(
              Icons.star,
              color: Colors.red,
            ),
            // 设置右边距
            Padding(padding: EdgeInsets.only(right: 8)),
            // 右边数字
            Text('41'),
          ],
        ),
    );

3. 实现按钮模块

// 自定义按钮定制
    Column buildButtonColumn(IconData icon, String label) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, color: Colors.blue),
          Padding(padding: EdgeInsets.only(top: 20.0),),
          Text(
            label, 
            style: TextStyle(
              fontSize: 12.0,
            ),
          ),
        ],
      );
    }

    // 按钮行创建
    Widget buttonSection = Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            buildButtonColumn(Icons.call, "打电话"),
            buildButtonColumn(Icons.near_me, "找我"),
            buildButtonColumn(Icons.share, "分享"),
          ],
        ),
    );

4. 实现正文模块

Widget textSection = Container(
      padding: EdgeInsets.fromLTRB(32, 40, 32, 0),
      child: Text('今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.')
    );

5. 整合所有模块

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      
      body: ListView (
        
        children: [
          // 图片模块
          imageSection,
          // 标题模块
          titleSection,
          // 按钮模块
          buttonSection,
          // 正文模块
          textSection,
        ],
      ),
    );

源码地址