如何让ListView包裹的TextButton宽度与内部文本尺寸一致

问题原因 #

ListView 默认会给所有子组件施加交叉轴方向的填满约束，所以放在 ListView 里的 TextButton 会被强制拉伸到和屏幕同宽，无法自适应文本尺寸。

实现方案 #

方案1：外层包裹对齐组件（推荐） #

在 ListView 中给 TextButton 套上 Align 或 Center 组件，这类组件会松绑宽度强制约束，让子组件按自身内容尺寸渲染，还可以通过 alignment 参数调整按钮在水平方向的位置：

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kBackgroundColor,
      body: SafeArea(
        child: ListView(
          children: [
            Align(
              // 可调整为 Alignment.center / Alignment.centerRight 改变按钮位置
              alignment: Alignment.centerLeft,
              child: tacButton(),
            ),
          ],
        ),
      ),
    );
  }
}

Widget tacButton() {
  return TextButton(
    onPressed: () {},
    child: const Text('Text Button'),
  );
}

方案2：直接修改按钮约束 #

如果不想改动 ListView 层的代码，可以直接给 TextButton 套 UnconstrainedBox 取消上层强制约束，或者通过按钮样式参数调整尺寸适配：

// 方式A：套UnconstrainedBox
Widget tacButton() {
  return UnconstrainedBox(
    child: TextButton(
      onPressed: () {},
      child: const Text('Text Button'),
    ),
  );
}

// 方式B：修改按钮样式参数
Widget tacButton() {
  return TextButton(
    style: TextButton.styleFrom(
      // 去掉默认的最小尺寸约束
      minimumSize: Size.zero,
      // 缩小点击热区到按钮自身尺寸
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      // 按需调整内边距，避免文字贴边
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    ),
    onPressed: () {},
    child: const Text('Text Button'),
  );
}

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