Flutter布局之标题

---

原文链接

教程推荐

---

效果图

代码

Widget titleSection = Container(
    padding: const EdgeInsets.all(32.0),
    color: Colors.grey[100],
    child: Row(
      children: [
        Expanded(   //分析1
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,  //分析 2
            children: [
              Container(
                padding: const 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('描述'),
      ],
    ),
  );
复制代码

分析

• 分析1: Expanded 中包含的内容是（标题行和描述行）。使用Expanded会让其内容占据屏幕中除了其他内容外剩余的空间，也就是下图中虚线框的位置：

• 分析2 crossAxisAlignment: CrossAxisAlignment.start 代表内容 左对齐。