主页 / coding / 问题 / 79583987
Accepted
Alexander L. Belikoff
Asked: 2025-04-21 11:24:55 +0800 CST

Flutter UI：文本+图标居中，带溢出管理

  • 772

我很感激您能帮我找到实现此 UI 功能的惯用方法。假设我想要一个由“IconButton和”组成的组合Text（例如，一个名称前面有一个星号）。我想将它放置在“和”中Row（它本身位于一个容器中，例如Column“”。但是，我需要确保满足以下要求（参见附图）：

  • 图标位于文本正前方（即中间没有多余的空格）
  • 当文本足够短时，这对小部件位于行内的中心。
  • 如果文本太长，则会被适当剪辑（例如使用省略号）而不会溢出。

在此处输入图片描述

到目前为止，我还没有成功实现这一点。如果我Spacer在两侧放置两个 Widget，生成的文本会被严重截断。如果我用 包裹它Expanded，就会引发 flex 异常。鉴于这表面上是一种相当流行的文本呈现方式，那么 Flutter 的布局方式是什么呢？

flutter

2 个回答

  1. 您可以使用Flexible小部件

    像这样

    Container(
  width: 300,
  height: 50,
  decoration: BoxDecoration(
    color: Colors.cyan,
    border: Border.all(color: Colors.black, width: 0.5),
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, color: Colors.white),
      Flexible(
        child: const Text(
          'This is a test ',
          overflow: TextOverflow.ellipsis,
        ),
      ),
    ],
  ),
)
    • 3
  2. Best Answer

    我已根据您提供的图像尝试了以下代码。希望它对您有所帮助。

    Container(
            padding: EdgeInsets.all(5),// manage padding on your need
            decoration: BoxDecoration(
              color: Colors.blue.shade200,
              border: Border.all(color: Colors.black, width: 0.5),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize:
                  MainAxisSize.min, // add  MainAxisSize.min for your container width along with text
              children: [
                Icon(Icons.star, color: Colors.white),
                Flexible(
                  child: const Text(
                    'So far, I have been very successful in making this work. ',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),

    结果屏幕：

    在此处输入图片描述

    在此处输入图片描述

    • 1

相关问题