dart 行构件内的Flutter环绕构件

hts6caw3 于 2023-05-04 发布在 Flutter

关注(0)|答案(4)|浏览(166)

我想实现这种行为。我有4个项目在一行，但我想在中间的两个文本的行为就像在一个 Package 部件和text2移动到下一行，如果text1是长，并填补所有空格。

下面是我的代码，但它溢出，而不是 Package 文本在两行

Widget _buildItem(String name, String status) {
    return Container(
      padding: const EdgeInsets.all(Dimens.unitX2),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Container(
            width: Dimens.unitX5,
            height: Dimens.unitX5,
            color: Colors.blue,
          ),
          SizedBox(width: Dimens.unitX1),
          Wrap(
            crossAxisAlignment: WrapCrossAlignment.center,
            alignment: WrapAlignment.spaceBetween,
            spacing: Dimens.unitX1,
            direction: Axis.horizontal,
            children: [
              Text(name),
              Text(status),
            ],
          ),
          SizedBox(width: Dimens.unitX1),
          Container(
            color: Colors.red,
            width: Dimens.unitX5,
            height: Dimens.unitX5,
          ),
        ],
      ),
    );
  }

dart

来源：https://stackoverflow.com/questions/67177147/flutter-wrap-widget-inside-row-widget

4条答案

按热度按时间

lb3vh1jj1#

将Wrap小部件 Package 在Flexible中：

...
Flexible(
    child: Wrap(
       crossAxisAlignment: WrapCrossAlignment.center,
       alignment: WrapAlignment.spaceBetween,
       spacing: 30,
       direction: Axis.horizontal,
       children: [
       Text('Text1'),
       Text('Text2 is a long text'),
     ],
   ),
 ),
...

赞(0）回复(0）举报 2023-05-04

wi3ka0sx2#

使用Expanded小部件 Package Wrap小部件：

Widget _buildItem(String name, String status) {
    return Container(
        padding: const EdgeInsets.all(Dimens.unitX2),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
                Container(
                    width: Dimens.unitX5,
                    height: Dimens.unitX5,
                    color: Colors.blue,
                ),
                SizedBox(width: Dimens.unitX1),
                Expanded(
                    child: Wrap(
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.spaceBetween,
                        spacing: Dimens.unitX1,
                        direction: Axis.horizontal,
                        children: [
                            Text(name),
                            Text(status),
                        ],
                    ),
                ),
                SizedBox(width: Dimens.unitX1),
                Container(
                    color: Colors.red,
                    width: Dimens.unitX5,
                    height: Dimens.unitX5,
                ),
            ],
        ),
    );
}

赞(0）回复(0）举报 2023-05-04

fafcakar3#

使用

Wrap(
   alignment : WrapAlignment.spaceBetween
)

赞(0）回复(0）举报 2023-05-04

7uzetpgm4#

我同时尝试了Flexible和Expanded。两者都有作用，即。长Row Package 。
但是如果Row很短，它们的工作方式就不同了--Expanded占用所有可用空间，但Flexible不是。
左边是Flexible，右边是Expanded：

赞(0）回复(0）举报 2023-05-04

我来回答

dart 行构件内的Flutter环绕构件

4条答案

相关问题

热门标签

最新问答