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 代表內容 左對齊。