主页 / coding / 问题 / 79583114
Accepted
Prakash kumar M
Asked: 2025-04-20 15:03:20 +0800 CST

Flutter：文本与 Stack 布局中的定位小部件重叠

  • 772

我正在开发一个 Flutter 布局，其中有一个交通方式列表（例如步行、汽车、公共汽车、火车），并且我使用一个小部件Stack将个人资料头像放在顶部。 这里的个人资料头像不在第 1 行内。 这是示例 UIPositioned

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text("Walk"),
          Text("Car"),
          Text("Bus"),
          Text("Train"),
        ],
      ),
    ),
    Positioned(
      top: 0,
      right: 0,
      child: CircleAvatar(
        radius: 24,
        child: Icon(Icons.person),
      ),
    ),
  ],
)

一切工作正常，直到文本变得太长，就像在这种情况下
，如果文本太长，这就是它绘制有问题的用户界面的方式

我尝试手动将文本包裹在固定宽度的 sizedbox 中，这样就不会重叠了。
但这并非在所有情况下都有效。

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Row(
            children: [
              Icon(Icons.directions_walk),
              SizedBox(width: 8),
              // Manually restrict text width to avoid overlap
              SizedBox(
                width: 80, // <-- hardcoded width
                child: Text("Walk Walk Walk"),
              ),
            ],
          ),
          Row(
            children: [
              Icon(Icons.directions_car),
              SizedBox(width: 8),
              Text("Car"),
            ],
          ),
          Row(
            children: [
              Icon(Icons.directions_bus),
              SizedBox(width: 8),
              Text("Bus"),
            ],
          ),
          Row(
            children: [
              Icon(Icons.train),
              SizedBox(width: 8),
              Text("Train"),
            ],
          ),
        ],
      ),
    ),
    Positioned(
      top: 0,
      right: 0,
      child: CircleAvatar(
        radius: 24,
        child: Icon(Icons.person),
      ),
    ),
  ],
)

有没有更好的方法来布局，这样Positioned小部件就不会干扰下面的文本布局——不需要硬编码宽度

flutter

1 个回答

  1. Best Answer

    我建议遵循以下两个步骤：

    1. 将 Text(“Walk Walk Walk”) 小部件放置在 Expanded 小部件内：

      Expanded(child: Text("Walk Walk Walk")),

    2. 在 Row 的末尾添加一个宽度为 32 的 SizedBox：

    Row(
  children: [
    Icon(Icons.directions_walk),
    SizedBox(width: 8),
    // Expanded will use all the remaining space in the row
    Expanded(child: Text("Walk Walk Walk")),
    SizedBox(width: 32),
  ],
);

    为什么是“32”？你的 CircleAvatar 半径为 24，所以它的宽度是 48。而且你给 Column 添加了 16 的 padding。所以减去 48 - 16 = 32。这就是避免重叠所需的空间。

    这样，无论屏幕大小如何，您都可以避免重叠，同时充分利用所有剩余空间：

    窄屏示例

    宽屏示例

    此外，您应该考虑为头像半径和列填充创建一个变量，以便您可以按照以下方式设置 SizedBox 宽度并避免硬编码值：

    Row(
  children: [
    Icon(Icons.directions_walk),
    SizedBox(width: 8),
    // Expanded will use all the remaining space in the row
    Expanded(child: Text("Walk Walk Walk")),
    SizedBox(width: 2 * avatarRadius - padding),
  ],
);

    希望这有帮助！

    • 3

相关问题