行 mainAxisAlignment 不适用于 FittedBox

Question

使用 FittedBox 包装后行 mainAxisAlignment 不起作用 请解释一下为什么会这样。

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          height: 20,
          child: FittedBox(
            fit: BoxFit.fill,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('THis is the thing'),
                Text('THis is another thing'),
              ],
            ),
          ),
        )
    );
  }

预期

输出

Answer 1

如果您真的想在 FittedBox 中使用 Row 并具有 mainAxisAllignment.spaceBetween 或任何效果，则必须使用 SizedBox 手动设置 spaceBetween 并根据间距宽度。还将 fit 属性设置为 BoxFit.fitHeight 。

Container(
          height: 20,
            child: FittedBox(
              alignment: Alignment.center,
              fit: BoxFit.fitHeight,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('THis is the thing',style: TextStyle(fontSize: 20),),
                  SizedBox(width: 300,),
                  Text('THis is another thing',style: TextStyle(fontSize: 20,),),
                ],
              ),
            ),
        )

注意：设置 allignment 属性来指定定位。对于MainAxisAllignment.start 和MainAxisAllignment.start。 例如：Alignment.topLeft 得到MainAxisAllignment.start 效果。

Answer 2

回答你的问题，

mainAxisAlignment 行在用FittedBox 包装后不起作用 请解释一下为什么会这样。

Container 总是填满屏幕大小的整个宽度。如果它有孩子，那么它将自己包裹起来以匹配其孩子的宽度。

另一个有趣的小部件FittedBox 将根据可用空间缩放来适应其子代的大小。

解决方案

为了达到预期的效果，您可以将Container小部件的width强制设置为double.infinity

片段

body: Container(
          height: 20,
          width: double.infinity,
          child: FittedBox(
            fit: BoxFit.fill,
            alignment: Alignment.center,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [Text('THis is the ROW'), Text('THis is another  ')],
            ),
          ),
        )

注意：如果文本很小，它将被放大以占据其余空间，因为它位于 FittedBox 内，反之亦然。