0

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

我Horizontal Stack喜欢Row，里面有：

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

在此处输入图像描述

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

我当前的代码

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

哪里是宽度空间，当小部件小于其余可访问大小titleWidth时应应用。 是一个小部件。在示例中，它是一个.sublinepinkSpacesublineText

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

4

3 回答 3

0

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

于 2021-12-21T22:19:25.467 回答
0

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

  @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)),
        ],
      )
        
    );
  }
}
于 2021-12-21T23:10:17.217 回答
0

间距小部件

Flutter 有很多小部件来帮助调整间距 - 在小部件内部，例如Row或Column包含子列表的小部件。

前：

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

代码示例

鉴于您的要求：

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

SizedBox 是不行的

SizedBox不适用于多行文本，因为TextaRow中的多行必须包含在Flexible（Flutter - 行内的多行标签）中，并且 SizedBox 将始终占据您设置的任何宽度 - 没有 Spacer、Flexible 或 Expanded 的组合似乎在这里工作。

替代解决方案

一种选择是指定 aRow并将 mainAxisAlignment 设置为MainAxisAlignment.end并使用 BoxConstraint 和 MediaQuery 减去我们想要的文本容器的 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. 以及可能的填充大小，您可能还需要减去其他小部件的大小。
于 2021-12-21T22:34:22.653 回答