Flutter自定义Widget问题：不缩小文本限制组件尺寸

我尝试实现如图所示的Widget：

目前得到的效果如图：

我的问题是：如何在不缩小文本的前提下限制该Widget的尺寸？

以下是我的实现代码：

SizedBox(
  height: 90,
  width: double.infinity,
  child: ListView.builder(
    itemCount: 10,
    shrinkWrap: true,
    padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 15),
    scrollDirection: Axis.horizontal,
    itemBuilder: (BuildContext context, int index){
      return Container(
        height: 80,
        width: 78,
        padding: const EdgeInsets.only(right: 11),
        alignment: Alignment.center,
        child: OutlinedButton(
          onPressed: () {

          },
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.black,
            side: const BorderSide(color: Colors.cyan, width: 1),

          ),
          child: const Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("SEG", style: TextStyle(color: Colors.white,fontSize: 10 )),
              Text("20", style: TextStyle(color: Colors.white,fontSize: 10 )),
            ],
          ),
        ),
      );
    },

  ),
)

解决方案 #

你的问题核心是OutlinedButton默认会被父容器挤压，加上ListView的shrinkWrap属性导致布局冲突，进而压缩了内部文本。按以下修改即可解决：

1. 给按钮设置固定最小尺寸：在OutlinedButton.styleFrom中添加minimumSize，强制按钮保持指定宽高，避免被压缩：

   minimumSize: const Size(78, 80),
   

2. 移除ListView的shrinkWrap属性：外层已经用SizedBox固定了高度，shrinkWrap会让ListView尝试收缩到内容高度，反而引发布局挤压，直接删掉即可。

3. 调整容器的内边距为外边距：把Container的padding改成margin，避免内边距占用按钮的可用空间：

   margin: const EdgeInsets.only(right: 11),
   

4. 移除按钮内部默认padding：在OutlinedButton.styleFrom中添加padding: EdgeInsets.zero，避免按钮自带的padding挤压文本。

修改后的完整代码：

SizedBox(
  height: 90,
  width: double.infinity,
  child: ListView.builder(
    itemCount: 10,
    padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 15),
    scrollDirection: Axis.horizontal,
    itemBuilder: (BuildContext context, int index){
      return Container(
        height: 80,
        width: 78,
        margin: const EdgeInsets.only(right: 11),
        alignment: Alignment.center,
        child: OutlinedButton(
          onPressed: () {},
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.black,
            side: const BorderSide(color: Colors.cyan, width: 1),
            minimumSize: const Size(78, 80),
            padding: EdgeInsets.zero,
          ),
          child: const Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("SEG", style: TextStyle(color: Colors.white,fontSize: 10 )),
              Text("20", style: TextStyle(color: Colors.white,fontSize: 10 )),
            ],
          ),
        ),
      );
    },
  ),
)

关键说明 #

• minimumSize是核心：强制按钮保持设置的宽高，不会因为父容器的限制而压缩内部文本；
• 改用margin避免挤压按钮空间，保证按钮能完整展示；
• 移除shrinkWrap让ListView直接使用外层SizedBox的固定高度，消除布局冲突。

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