Flutter中的布局问题，文本裁剪和对齐

Question

我想显示具有以下内容的行：

1. 与行左侧对齐：容器内的图标和文本。注意：我不想使用标准 Chip() 小部件。
2. 与行右侧对齐：一个按钮。

如果屏幕宽度太小，则必须剪切文本（以省略号结尾）。

如果屏幕宽度足够，那么它应该只占用它需要的空间；没有占用全部可用空间。

出于性能原因，我不想使用 IntrinsicWidth。

以下代码示例用于测试目的：

import 'package:flutter/material.dart';

class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Flexible(
          child: Container(
            color: Colors.yellow,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.info),
                Flexible(
                  child: Text(
                    'This text might be clipped',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),

        ElevatedButton(
          onPressed: () {},
          child: Text('Button'),
        ),
      ],
    );
  }
}

结果是这样的：

看起来不错。但是当我有更大的屏幕宽度时，它看起来像这样：

这不是我想要的。按钮应向右对齐。

我尝试通过在容器和按钮之间使用 Spacer() 来解决它。然后我得到这个：

结果是Spacer()占用了太多的空间。文本有足够的空间，但不幸的是它现在被剪裁了。

我该如何解决这个问题？

Answer 1

使用 Expanded 来实现此目的。在按钮所在的

Row

中，将

Container

包裹在

Expanded

内，如下所示：

class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // add Expanded here
        Expanded(
          child: Container(
            color: Colors.yellow,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.info),
                Flexible(
                  child: Text(
                    'This text might be clipped',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),
        ElevatedButton(
          onPressed: () {},
          child: Text('Button'),
        ),
      ],
    );
  }
}