当行中有行时,Flutter文本溢出属性不起作用

ru9i0ody  于 2023-04-22  发布在  Flutter
关注(0)|答案(2)|浏览(100)

@override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              CircleAvatar(),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(title, overflow: TextOverflow.ellipsis),
                  Text(part),
                ],
              ),
            ],
          ),
          ElevatedButton(onPressed: () {}, child: Text('btn')),
        ],
      ),
    );
  }

文本小部件的溢出属性不起作用。
用flexible和expanded Package 小部件也不起作用。
当一行中有另一行时,我应该如何处理文本溢出?
我想要的是文本更长,这样当它遇到一个按钮时,...文本在按钮前面处理。

第一次

用flexible Package 行小部件不起作用。

@override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Flexible(
            child: Row(
              children: [
                CircleAvatar(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(title, overflow: TextOverflow.ellipsis),
                    Text(part),
                  ],
                ),
              ],
            ),
          ),
          ElevatedButton(onPressed: () {}, child: Text('btn')),
        ],
      ),
    );
  }

第二次

如果我用Wrap小部件替换Row within a Row,然后用Flexible Package Wrap小部件,则文本将被推到底线。

@override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Flexible(
            child: Wrap(
              children: [
                CircleAvatar(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(title, overflow: TextOverflow.ellipsis),
                    Text(part),
                  ],
                ),
              ],
            ),
          ),
          ElevatedButton(onPressed: () {}, child: Text('btn')),
        ],
      ),
    );
  }
xdnvmnnf

xdnvmnnf1#

您需要用Expanded Package 内部的RowColumn以获得可用空间(约束)。

Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Expanded(
        child: Row(
          children: [
            CircleAvatar(),
            Expanded(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(title, overflow: TextOverflow.ellipsis),
                  Text("part"),
                ],
              ),
            ),
          ],
        ),
      ),
      ElevatedButton(onPressed: () {}, child: Text('btn')),
    ],
  ),
),

关于ayout/constraints

mv1qrgav

mv1qrgav2#

你不需要两行,使用以下代码:

Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    CircleAvatar(),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(title, overflow: TextOverflow.ellipsis),
                          Text(part),
                        ],
                      ),
                    ),
                    ElevatedButton(onPressed: () {}, child: Text('btn')),
                  ],
                ),
              ),

结果:

相关问题