如何使行在Flutter中占據其父級的全部寬度？

我想創造這種平靜的 UI

問題出在包含Title和Date的Red Row中。我希望這個Row占據它的父小部件的整個寬度，這樣我就可以在這兩個Text小部件之間添加一個空格......這就是我到目前為止所做的。

Container(
      color: Colors.yellow,
      margin: const EdgeInsets.symmetric(vertical: 6),
      child: Container(
        color: Colors.green,
        child: Row(
          children: [
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 1, color: AppColors.tertiary),
                borderRadius: BorderRadius.circular(240),
              ),
              child: Image.asset(image, width: 48, height: 48),
            ),
            const SizedBox(width: 6),
            Container(
              color: Colors.blue,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    color: Colors.red,
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          title,
                          style: Theme.of(context).textTheme.subtitle1?.copyWith(color: Theme.of(context).colorScheme.primary),
                        ),
                        Text(
                          date,
                          style: Theme.of(context).textTheme.bodyText2?.copyWith(color: AppColors.tertiary),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 3),
                  Text(
                    value.toString(),
                    style: Theme.of(context).textTheme.bodyText2?.copyWith(color: AppColors.tertiary),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

我試圖用擴展小部件和SizedBox.expand()包裝此行，但它不起作用。

uj5u.com熱心網友回復：

你需要用小部件包裝你Container的包含列Expanded：

Row(
    children: [
      Container(
        decoration: BoxDecoration(
          border: Border.all(width: 1, color: Colors.black),
          borderRadius: BorderRadius.circular(240),
        ),
        child: Image.asset(image, width: 48, height: 48),
      ),
      const SizedBox(width: 6),
      Expanded( //<---- add this
        child: Container(
          color: Colors.blue,
          child: Column(

uj5u.com熱心網友回復：

Row(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          decoration: BoxDecoration(
            border: Border.all(width: 1, color: Colors.black12),
            borderRadius: BorderRadius.circular(240),
          ),
          child: Text('image'),
        ),
        const SizedBox(width: 6),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  color: Colors.red,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'title',
                        style: Theme.of(context).textTheme.subtitle1?.copyWith(
                            color: Theme.of(context).colorScheme.primary),
                      ),
                      Text(
                        'date',
                        style: Theme.of(context)
                            .textTheme
                            .bodyText2
                            ?.copyWith(color: Colors.black12),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 3),
                Text(
                  'value',
                  style: Theme.of(context)
                      .textTheme
                      .bodyText2
                      ?.copyWith(color: Colors.black12),
                ),
              ],
            ),
          ),
        ),
      ],
    ),

您必須使用 Expanded 小部件包裝具有該 Row 的子容器，以便讓他知道您希望它占用所有可用空間。

注意：考慮到我已經對您的變數/顏色進行了一些更改，以便在 Flutter pad 上進行測驗！

標籤：扑颤振布局

上一篇：錯誤說明：預期1個位置引數，但找到0個。嘗試添加缺少的引數

下一篇：顫振-“來自sdk和syncfusion_flutter_datagrid^19.1.65-beta的顫振，版本求解失敗。”錯誤