在flutter中将小部件包装在Row中

问题描述 投票:0回答:2

我有以下Widget树结构:

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Flexible(Text("Very very long text title", overflow: TextOverflow.ellipsis)),
            getMenuAnchor(),
          ],
        )),
        IconButton(icon: 'share_icon.png')
      ],
    );

如果屏幕有足够的宽度,则可以正确显示: landscape mode

但是,如果我们从横向模式切换到纵向模式,我希望标题换行并以省略号结尾,这样

share_icon
menu_anchor
text
可以适合单行而不溢出。

portrait mode

小部件树应该是什么,以便所有元素都可以连续显示而不抑制共享和菜单图标?

flutter
2个回答
0
投票

删除包装文本和菜单锚点的未使用容器:

            Row(
              children: [
                Flexible(child: Text("Very very long text title", overflow: TextOverflow.ellipsis)),
                getMenuAnchor(),
                IconButton(icon: 'share_icon.png')
              ],
            ),

或者如果你确实需要容器,那么也尝试用Flexible 包裹它:

            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  child: Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Flexible(child: Text("Very very long text title", overflow: TextOverflow.ellipsis)),
                          getMenuAnchor(),
                        ],
                      )),
                ),
                IconButton(icon: 'share_icon.png')
              ],
            ),

0
投票

试试这个:

Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                    child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Flexible(Text("Very very long text title",
                        overflow: TextOverflow.ellipsis)),
                    getMenuAnchor(),
                  ],
                )),
                IconButton(icon: 'share_icon.png')
              ],
            ),
          );
© www.soinside.com 2019 - 2024. All rights reserved.