MainAxisAlignment.spaceBetween 或任何 MainAxisAlignment 根本不起作用

Question

Widget2 中的

MainAxisAlignment.spaceBetween

不起作用。

重要的Widget（）：

 Widget importantWidget(
  BuildContext context) {
return Column(children: [
  Padding(
      padding: const EdgeInsets.all(design.ComponentSpacing.small),
      child: Column(children: [
        _widget(context),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _widget1(),
            _widget2(context),
          ],
        ),
        _widget3(context),
      ])),
  const design.HorizontalDivider(),
]);
}

widget2():

    Widget widget2(
      BuildContext context) {
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SomeWidget(),
          autoBackupStatus,
          design.PrimaryButton(
            text: buttonText,
            onPressed: () =>
                context.router.push(SomeRoute()),
          ),
        ],
      ),
    );
   }

Answer 1

您的设计布局问题是由于在 widget2 的定义中误用 Expanded 而出现的。在另一个 Column 中使用 Expanded 可能会导致混乱并使小部件无法使用，因为 flutter 无法为您解决不同的布局约束。

解决方案

要解决此问题，您需要在 importantWidget 方法中将 _widget2(context) 用 Expanded 包装在 Row 内，并从 widget2 中删除 Expanded 小部件。这是修改后的代码：

Widget importantWidget(BuildContext context) {
  return Column(children: [
    Padding(
      padding: const EdgeInsets.all(design.ComponentSpacing.small),
      child: Column(children: [
        _widget(context),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _widget1(),
            Expanded(child: _widget2(context)), // Ensure Expanded is applied here
          ],
        ),
        _widget3(context),
      ]),
    ),
    const design.HorizontalDivider(),
  ]);
}

Widget _widget2(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      SomeWidget(),
      autoBackupStatus,
      design.PrimaryButton(
        text: buttonText,
        onPressed: () => context.router.push(SomeRoute()),
      ),
    ],
  );
}

解释

Expanded in Row 增强了 widget 2：通过在 _widget2(context) 放置在 Row 内时在 _widget2(context) 周围引入 Expanded，此设置的影响是 _widget2 将占用 Row 内剩余的空间。这可确保 MainAxisAlignment.spaceBetween 在 widget2 方法中正常工作，不会出现任何问题或受到其他小部件的干扰。

消除 widget2 内部的 Expanded：既然 _widget2 已经包含在父级别（行）的 Expanded 小部件中，那么它就不需要在其自己的定义内部也包含 Expanded 小部件。