Flutter：小部件压缩优先级

Question

我是 Flutter 的初学者，现在我尝试了解如何设置小部件压缩优先级的布局。例如我想要的：

我有Horizontal Stack 和Row 一样，里面有：

一些空格，比如SizedBox，然后是一些Text。当文本溢出它们自身空间时，我想减少文本之前的空间。

os ios 它通过布局约束中的压缩优先级来解决，但我如何在颤振上做同样的事情？

我当前的代码

          Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              SizedBox(width: titleWidth),
              Expanded(child: subline),
            ],
          )

其中titleWidth 是宽度空间，应在subline 小部件小于剩余可访问大小pinkSpace 时应用。 subline 是一个小部件。在示例中，它是Text。

但代码仅在带有“但这个...”的卡片上工作，它不会减少文本小部件之前的空间。

Answer 1

间距小部件

Flutter 有很多小部件可以帮助设置间距 - 在 Row 或 Column 等内部小部件中，它们会接收子列表。

F.ex:

• Spacer - 填充其他子小部件之间空间的小部件。
• Flexible - 包装一个小部件并允许您定义一个 flex 值以影响该小部件与子列表中的其他小部件相比应占用多少空间。
• Expanded - 如果你在其中包装一个小部件，你会让一个小部件填满剩余的空间。
• ConstrainedBox - 允许为子小部件设置 minWidth、maxWidth、minHeight、maxHeight。

代码示例

根据您的要求：

1. 单行文本有缩进
2. 多行文本没有缩进

SizedBox 是不行的

SizedBox 不适用于多行文本，因为 Row 中的多行 Text 必须包含在 Flexible (Flutter - multiline label inside row) 中，并且 SizedBox 将始终占据您设置的任何宽度- Spacer、Flexible 或 Expanded 的组合似乎在这里不起作用。

替代解决方案

一种选择是指定 Row 并将 mainAxisAlignment 设置为 MainAxisAlignment.end 并使用带有 MediaQuery 的 BoxConstraint 减去我们想要的文本容器的 minWidth 的屏幕宽度。

• 这实际上与 SizedBox 尝试相反。

class IndentedText extends StatelessWidget {
  const IndentedText({Key? key, required this.text, this.textMinWidth = 150}) : super(key: key);

  final String text;
  final double textMinWidth;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: [
        Flexible(
          child: ConstrainedBox(
            constraints: BoxConstraints(minWidth: MediaQuery.of(context).size.width - textMinWidth),
            child: Text(text),
          ),
        ),
      ],
    );
  }
}

然后是widget的用法

class SpacingExample extends StatelessWidget {
  const SpacingExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Card(
          child: Column(
            children: const [
              IndentedText(text: "text"),
              IndentedText(
                text:
                    "A vehicle is a object people use to get around more easily, etc etc make the text longer and multiline.",
              )
            ],
          ),
        ),
      ],
    );
  }
}

外观：

• 注意：对于更复杂的用例，当您减去 minWidth - 如果布局有多个列 f.ex. 以及可能的填充大小，您可能还需要减去其他小部件的大小。李>

Answer 2

试试这个代码，我希望这个

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Expanded(
           child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          SizedBox(width: titleWidth),
          Expanded(child:Card( child: subline)),
        ],
      )
        
    );
  }
}

Answer 3

我没有看到你的代码，但你可以使用卡片小部件，它可以工作