掌握扑动 Wrap-Layout

Question

我得到了一些 UI-element 的标题和描述，并希望将它们放在一起。标题和描述会因长度而异。（因为我不知道构建时间之前的长度）

这是我的代码：

Container(
  color: Colors.red,
  margin: EdgeInsets.all(0),
  padding: EdgeInsets.all(0),
  child: Wrap(
    direction: Axis.horizontal,
    children: [
      Padding(
        padding: EdgeInsets.only(top: 15, bottom: 0, left: 15, right: 15),
        child: Text(
          "this is a test title",
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black),
        ),
      ),
      Padding(
          padding: EdgeInsets.only(top: 15, bottom: 15, left: 15, right: 15),
          child: Text(
            "This is a test descripton This is a test descripton This is a test descripton This is a test descripton",
            style: TextStyle(color: Colors.black, fontSize: 15),
          )),
    ],
  ))

看起来像这样，这就是我想要的：

另外，当标题和描述很长时，它就是我想要的样子：

但是当标题和描述很短时，会出现这种情况：

他们现在 side-by-side 这不是我想要的。如果我将 direction 更改为 Axis.vertical，则会发生以下情况：

看起来不错吧？

但是如果标题和描述又很长怎么办？

妈的，现在文字都溢出来了

有没有人知道如何实现我想要的，无论我的标题和描述有多长？非常感谢！

Answer 1

Wrap 是此任务的错误小部件。要强制小部件以这样的垂直排列显示，请使用 Column 和 MainAxisSize.min。

Container(
  color: Colors.red,
  margin: EdgeInsets.all(0),
  padding: EdgeInsets.all(0),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Padding(
        padding: EdgeInsets.only(top: 15, bottom: 0, left: 15, right: 15),
        child: Text(
          "this is a test title",
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
      ),
      Padding(
        padding: EdgeInsets.only(top: 15, bottom: 15, left: 15, right: 15),
        child: Text(
          "This is a test descripton This is a test descripton This is a test descripton This is a test descripton",
          style: TextStyle(color: Colors.black, fontSize: 15),
        ),
      ),
    ],
  ),
);

掌握扑动 Wrap-Layout

Mastering flutter Wrap-Layout

word-wrap

dart

flutter

flutter-layout