flutter - RenderFlex 可以使用整个 Row() 并适应溢出的 Text() 元素吗？

Question

我有一个 Row() ，其中有两个 Text() 元素。通常它们都有足够的空间，但只是偶尔没有，我会得到如下结果之一，具体取决于我使用的布局设置：

我真正希望发生的是，如果两个元素都有足够的空间，那么它们应该左右对齐（如第二个图块）。但是，否则一个或两个都应该被截断，以使整个行宽尽可能多地显示，在它们之间留一些空间。

我已经阅读了 RenderFlex 的描述，并尝试了 Flexible() 和 Expanded() 包装器，但不能让它表现得那样。

我目前使用的代码如下。在这种特殊情况下，我可以通过调整 flex 值来接近我想要的，但我希望有一个更强大的解决方案。

              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Flexible(
                    flex: 10,
                    fit: FlexFit.loose,
                    child: Text(
                      '${instrument.exchDisp}/${instrument.exch}',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: AppTextStyles.instrumentExchangeText(context),
                    ),
                  ),

                  Spacer(flex: 1,),

                  Flexible(
                    flex: 10,
                    fit: FlexFit.loose,
                    child: Text(
                      '${instrument.typeDisp}/${instrument.type}',
                      textAlign: TextAlign.right,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: AppTextStyles.instrumentTypeText(context),
                    ),
                  ),
                ],
              ),

标签： flutterflutter-layout

Answer 1

我认为关键是只使用一个Expanded并将另一个Row子小部件保持为固定大小。

Flutter 的Flex小部件 (Row和Column) 将首先布局任何不是 Flexible/的东西Expanded，然后将布局Flexible/Expanded具有剩余空间的项目。

因此，下面的组合将首先布局中间间隔和“右侧”文本，然后将任何剩余空间用于“左侧”长文本。

对于中间的间隔，我只使用SizedBox.

import 'package:flutter/material.dart';

class FlexTextWrapPage2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flex Text Wrap'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(// ← uses any remaining space
                child: Container(
                  color: Colors.redAccent.withOpacity(.2),
                  child: Text('left side may be really long',
                    style: TextStyle(fontSize: 30),
                    overflow: TextOverflow.ellipsis,
                  ),
                )),
            SizedBox(width: 5), // ← laid out in first phase
            Container( // ← laid out in first phase
              color: Colors.indigoAccent.withOpacity(.2),
                child: Text('right side',
                  style: TextStyle(fontSize: 30),))
          ],
        ),
      ),
    );
  }
}

结果如下：

彩色容器仅用于可见性。

我在这个有点相关的答案中更详细地介绍了它是如何/为什么起作用的。