南京专业网站设计公司湖南网络推广服务
目录
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 点击无响应
相关推荐
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 基础组件 Text 详解-CSDN博客文章浏览阅读1.1k次，点赞42次，收藏25次。Text 组件是 Flutter 中最常用的 UI 组件之一，用于显示文本内容。它支持样式自定义、多行显示、溢出控制等功能，适用于各种文本场景。本文将详细介绍 Text 组件的使用方式及其重要参数。https://shuaici.blog.csdn.net/article/details/146067083Flutter 基础组件 Scaffold 详解-CSDN博客文章浏览阅读494次，点赞21次，收藏23次。Scaffold 主要在 MaterialApp 主题下使用，它是实现Material Design基本视觉布局结构的Widget，它为应用提供了一个可定制的结构，包括 AppBar（应用栏）、Drawer（侧边栏）、FloatingActionButton（浮动按钮）、BottomNavigationBar（底部导航栏） 等。本文将详细解析 Scaffold 的功能和使用方法。
https://shuaici.blog.csdn.net/article/details/146067470