space 在 ConstrainedBox 之间

Question

ConstrainedBox 中有两行。第一行有两个小部件，然后我想在它们之间显示 space。第二行只有一个小部件，它的大小总是不一样（就像聊天中的文本）。问题是第一行的长度没有跟随第二行，如何解决？谢谢！

ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 300 ) ,
      child:  Column(
        mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
        children: [
         Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.min,
            children: [
             Flexible(child: const Text("Flutter")),
             const Image(image: NetworkImage("https://penueling.com/wp-content/uploads/2020/11/flutter.jpg"), width: 40, height: 20,),
            ],
          ),
             const Text("1111111111111"),
        ],
      ))

Answer 1

您可以组合使用 Stack and Positioned 个小部件来实现此布局。基本上你制作一个 Column 和上面的你在 Stack 中添加图像，然后你指示图像转到右上角的位置。

类似这样的东西（我用一个图标作为例子）：

ConstrainedBox(
    constraints: const BoxConstraints(
      maxWidth: 300,
    ),
    child: Stack(children: [
      Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [Text("Flutter"), Text('1111111111111')]),
      const Positioned(
          top: 0, right: 0, child: Icon(Icons.person, size: 16))
    ])),

如果底部文本占用的 space 少于 Flutter 文本，这可能会给您带来问题。如果发生这种情况，您可以向 BoxConstraints 添加另一个约束：

minWidth: 100,

space 在 ConstrainedBox 之间

space between in ConstrainedBox

dart

flutter

flutter-layout