Flutter 按钮组件 TextButton 详解

帅次

已于 2025-03-13 00:43:24 修改

阅读量2.3k

点赞数 61

分类专栏： Flutter 文章标签： flutter android ios 小程序 kotlin web app android runtime

于 2025-03-12 09:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/g984160547/article/details/146068020

版权

Flutter 专栏收录该内容

28 篇文章

订阅专栏

1. 引言

在 Flutter 中，TextButton 是一种无背景的按钮，适用于次要或轻量级操作。它的外观更加简洁，仅包含文字，适合用作辅助性操作，如“取消”或“了解更多”。相比 ElevatedButton，TextButton 没有阴影和背景色，更加简约。

2. TextButton 的基本用法

TextButton 需要 onPressed 事件和 child 组件。

TextButton(
  onPressed: () {
    print('TextButton 被点击');
  },
  child: Text('点击我'),
)

如果 onPressed 设为 null，按钮会变为不可点击状态。

TextButton(
  onPressed: null,
  child: Text('不可点击'),
)

3. 主要属性

属性	说明
`onPressed`	按钮点击时的回调函数
`onLongPress`	长按时触发的回调
`child`	按钮的内容，如 `Text` 或 `Icon`
`style`	自定义按钮样式

示例：

TextButton(
  onPressed: () {},
  onLongPress: () => print('长按按钮'),
  child: Text('长按试试'),
)

4. 自定义按钮样式

4.1 修改文本颜色

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.blue, // 文字颜色
  ),
  onPressed: () {},
  child: Text('自定义颜色'),
)

4.2 添加背景色

TextButton(
  style: TextButton.styleFrom(
    backgroundColor: Colors.blue,
    primary: Colors.white,
  ),
  onPressed: () {},
  child: Text('带背景色的 TextButton'),
)

4.3 修改按钮形状和边距

TextButton(
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  ),
  onPressed: () {},
  child: Text('圆角按钮'),
)

4.4 样式定制

TextButton(
            style: ButtonStyle(
              // 文字颜色（包括禁用状态）
              foregroundColor: WidgetStateProperty.resolveWith<Color>(
                    (Set<WidgetState> states) {
                  if (states.contains(WidgetState.disabled)) return Colors.grey;
                  return Colors.blue;
                },
              ),
              // 背景色
              backgroundColor: WidgetStateProperty.all(Colors.transparent),
              // 水波纹颜色
              overlayColor: WidgetStateProperty.all(Colors.blue.withOpacity(0.1)),
              // 内边距
              padding: WidgetStateProperty.all(EdgeInsets.symmetric(horizontal: 16)),
              // 边框形状
              shape: WidgetStateProperty.all(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
            onPressed: () {},
            child: Text('自定义样式'),
          )

5. 高级应用技巧

5.1 图标+文本组合

          TextButton.icon(
            icon: Icon(Icons.add_box_rounded, size: 20),
            label: Text('添加好友'),
            onPressed: () {},
            style: ButtonStyle(
              padding: WidgetStateProperty.all(
                EdgeInsets.symmetric(vertical: 12, horizontal: 20),
              ),
            ),

5.2 主题统一配置

MaterialApp(
  theme: ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all(Colors.purple),
        textStyle: MaterialStateProperty.all(
          TextStyle(fontWeight: FontWeight.bold)),
      ),
    ),
  ),
)

5.3 动态交互

// 点击缩放动画
TextButton(
  onPressed: () {},
  child: AnimatedContainer(
    duration: Duration(milliseconds: 200),
    transform: isPressed ? Matrix4.diagonal3Values(0.95, 0.95, 1) : null,
    child: Text('动态按钮'),
  ),
)

6. 性能优化与注意事项

6.1 点击区域优化

默认最小尺寸为 48x48（Material规范），可通过 minimumSize 调整：

style: ButtonStyle(
      minimumSize: MaterialStateProperty.all(Size(100, 50)
    ),

6.2 避免过度重建

对静态按钮使用 const 优化：

const TextButton(
  onPressed: _handleClick,
  child: Text('静态按钮'),
)

6.3 无障碍支持

const TextButton(
  onPressed: _handleClick,
  child: Text('静态按钮'),
)

6.4 点击无响应

检查 onPressed 是否为 null
确认父组件未被 IgnorePointer 或 AbsorbPointer 包裹
检测是否被其他组件覆盖（如透明层）

Flutter 按钮组件 TextButton 详解

1. 引言

2. TextButton 的基本用法

3. 主要属性

4. 自定义按钮样式

4.1 修改文本颜色

4.2 添加背景色

4.3 修改按钮形状和边距

4.4 样式定制

5. 高级应用技巧

5.1 图标+文本组合

5.2 主题统一配置

5.3 动态交互

6. 性能优化与注意事项

6.1 点击区域优化

6.2 避免过度重建

6.3 无障碍支持

6.4 点击无响应

相关推荐