Flutter中如何给单个按钮添加两行不同字号的文本？

TextButton的child参数支持传入任意自定义Widget，并不限制只能使用单段Text组件，你要的上下排布不同字号的标题+描述按钮可以直接用Column嵌套两个Text实现，具体代码如下：

// 上下排布双行按钮实现代码
TextButton(
  onPressed: () {
    // 处理按钮点击事件
  },
  // 自定义按钮样式，按需调整
  style: TextButton.styleFrom(
    backgroundColor: const Color(0xFF2196F3),
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
    // 禁用文本默认内边距，避免布局偏移
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
  child: const Column(
    // 让Column自适应内容高度，不撑满父容器
    mainAxisSize: MainAxisSize.min,
    children: [
      Text(
        "按钮标题",
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.w600,
          color: Colors.white,
        ),
      ),
      // 两行文本的间距
      SizedBox(height: 4),
      Text(
        "按钮描述文本",
        style: TextStyle(
          fontSize: 12,
          color: Colors.white70,
        ),
      ),
    ],
  ),
)

如果你需要同一行内显示不同样式的文本，可以用RichText实现：

// 同行多样式按钮实现代码
TextButton(
  onPressed: () {},
  child: RichText(
    text: const TextSpan(
      children: [
        TextSpan(
          text: "标题：",
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
          ),
        ),
        TextSpan(
          text: "同行描述文本",
          style: TextStyle(
            fontSize: 13,
            color: Colors.grey,
          ),
        ),
      ],
    ),
  ),
)

两种方案可以根据你实际的排版需求灵活选择，也可以在child的布局里加入图标、分割线等其他组件实现更复杂的按钮样式。

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