Flutter：Row 在 Wrap 内步进一条线

Question

假设我们有：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        Row(
          children: [
            Text('a'),
          ],
        ),
        Row(
          children: [
            Text('b'),
          ],
        ),
      ],
    );
  }
}

其输出为：

注意每个 Row 是如何占整行的

我该如何解决这个问题并让它们并排显示？

Answer 1

你应该用 FittedBox 包裹你的 Row，这将使他们只消耗他们需要的 space，所以你的代码应该是这样的：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        FittedBox(
          child: Row(
            children: [
              Text('a'),
            ],
          ),
        ),
        FittedBox(
          child: Row(
            children: [
              Text('b'),
            ],
          ),
        ),
      ],
    );
  }
}

你的输出将是这样的：

Flutter：Row 在 Wrap 内步进一条线

Flutter: Row is stepping a line inside a Wrap

layout

dart

flutter

flutter-layout