如何制作带有一大一小两个容器的Label，应使用什么Widget实现目标设计？

你可以使用 Row 组件搭配 Expanded 或 Flexible 快速实现该布局，具体实现逻辑如下：

• 外层使用Row作为父容器，实现两个容器的水平排布
• 尺寸较小的容器可直接设置固定宽高
• 尺寸较大的容器用Expanded包裹，会自动填充Row的剩余可用空间

示例代码 #

固定小容器尺寸的实现：

Row(
  children: [
    // 小尺寸容器
    Container(
      width: 70,
      height: 36,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.circular(4),
      ),
      child: const Center(
        child: Text("标签", style: TextStyle(color: Colors.white)),
      ),
    ),
    const SizedBox(width: 8), // 两个容器的间距
    // 大尺寸容器
    Expanded(
      child: Container(
        height: 36,
        decoration: BoxDecoration(
          color: Colors.grey[100],
          borderRadius: BorderRadius.circular(4),
        ),
        child: const Padding(
          padding: EdgeInsets.symmetric(horizontal: 12),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text("内容区域"),
          ),
        ),
      ),
    )
  ],
)

如果需要按比例分配两个容器的宽度，可使用Flexible的flex属性调整占比：

Row(
  children: [
    // 占1份宽度
    Flexible(
      flex: 1,
      child: Container(height: 36, color: Colors.blueAccent, child: const Center(child: Text("标签", style: TextStyle(color: Colors.white)))),
    ),
    const SizedBox(width: 8),
    // 占4份宽度
    Flexible(
      flex: 4,
      child: Container(height: 36, color: Colors.grey[100], child: const Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text("内容区域"))),
    )
  ],
)

如需实现设计图里的圆角、边框、文字样式等效果，直接修改Container的decoration和子组件属性即可。

内容的提问来源于stack exchange，提问作者Denis Ken