目錄
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
