Flutter 基础 widgets --Button
TextButton（文本按钮）
用法：
（1）、TextButton() 创建普通的文本按钮
（2）、TextButton.icon() 创建一个带图标的文本按钮
属性：
child：Widget，必填，按钮内容
onPressed：void Function()，必填，点击事件
style: ButtonStyle，按钮样式
import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Text Button'), ), body: Container( padding: const EdgeInsets.all(10), child: Wrap( alignment: WrapAlignment.start, children: [ // 普通文本按钮 TextButton( onPressed: () {}, // 点击触发 onLongPress: () {}, // 长按触发 child: const Text('TextButton'), ), // 文本按钮 -- 属性用法 TextButton( onPressed: () {}, child: const Text('TextButton'), style: ButtonStyle( // button 按钮字体样式，按钮颜色由 foregroundColor 设置 textStyle: MaterialStateProperty.all( const TextStyle( fontSize: 30, // 字体大小 color: Colors.purple, // 注意：此处字体颜色无效 fontWeight: FontWeight.bold, // 字体粗细 ), ), // button 按钮文本和Icon的颜色，上面 textStyle 中的color设置无效 foregroundColor: MaterialStateProperty.all( Colors.red, ), // button 按钮背景填充颜色 backgroundColor: MaterialStateProperty.all( Colors.purple[50], ), // button 点击时的高亮颜色 overlayColor: MaterialStateProperty.all( Colors.yellowAccent, ), // button 按钮内边距 padding: MaterialStateProperty.all(const EdgeInsets.all(20)), // button 按钮边框相关的样式 shape: MaterialStateProperty.all(RoundedRectangleBorder( // 边框样式 side: const BorderSide( width: 5, color: Colors.blue, ), // 边框圆角 borderRadius: BorderRadius.circular(20), )), // button 按钮阴影高度 elevation: MaterialStateProperty.all(20), ), ), // 带 icon 的文本按钮 TextButton.icon( onPressed: () {}, icon: const Icon( Icons.add, size: 18, color: Colors.red, ), label: const Text('TextButton'), ), ], ), )); } }
ElevatedButton（凸起按钮）
通常作为主按钮，用法：
（1）、ElevatedButton() 创建普通的凸起按钮
（2）、ElevatedButton.icon() 创建一个带图标的凸起按钮
import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Elevated Button')), body: Container( padding: const EdgeInsets.all(10), child: Wrap( children: [ ElevatedButton( onPressed: () {}, child: const Text('ElevatedButton'), ), // 给按钮添加阴影 ElevatedButton( onPressed: () {}, child: const Text('Shadow'), style: ButtonStyle( shadowColor: MaterialStateProperty.all( Colors.amber, ), elevation: MaterialStateProperty.all(10), ), ), ElevatedButton( onPressed: () {}, child: const Text('ElevatedButton'), style: ButtonStyle( // Bad：按钮的宽度小于文本宽度 fixedSize: MaterialStateProperty.all( const Size(80, 20), ), // 修改按钮的背景色 backgroundColor: MaterialStateProperty.all( Colors.red[400], ), ), ), ElevatedButton( onPressed: () {}, child: const Text('PURCHASE'), style: ButtonStyle( // 按钮中文本的对齐方式 alignment: Alignment.bottomRight, backgroundColor: MaterialStateProperty.all( Colors.purple[400], ), ), ), // 带 icon 的凸起按钮 ElevatedButton.icon( onPressed: () {}, icon: const Icon(Icons.shopping_cart), label: const Text('ADD TO CART'), ), // Bad: 按钮中的icon和文本垂直居中展示 ElevatedButton( onPressed: () {}, child: Column( children: const [ Icon(Icons.add), Text('SEE ALL'), ], ), style: ButtonStyle( backgroundColor: MaterialStateProperty.all( Colors.red[400], ), ), ), // Bad: 按钮中同时使用2个icon ElevatedButton.icon( onPressed: () {}, icon: const Icon(Icons.ios_share_outlined), label: Row( children: const [ Text('SHOW'), Icon(Icons.close), ], ), style: ButtonStyle( backgroundColor: MaterialStateProperty.all( Colors.red[400], ), ), ) ], ), ), ); } }
OutlinedButton（轮廓按钮）
中等强调的按钮，重要程度仅次于主按钮
import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Outlined Button'), ), body: Container( padding: const EdgeInsets.all(10), child: Column( children: [ OutlinedButton( onPressed: () {}, child: const Text('Outlined Button'), ), OutlinedButton( onPressed: () {}, child: const Text('轮廓按钮'), style: ButtonStyle( textStyle: MaterialStateProperty.all( const TextStyle( fontSize: 30, fontWeight: FontWeight.w600, ), ), // 前景色 foregroundColor: MaterialStateProperty.resolveWith((states) { // 点击时，按钮的文本颜色为红色 if (states.contains(MaterialState.pressed)) { return Colors.red; } // 默认状态的文本颜色 return Colors.green; }), // 背景色 backgroundColor: MaterialStateProperty.resolveWith((states) { // 点击时，按钮的背景颜色 if (states.contains(MaterialState.pressed)) { return Colors.yellow; } // 默认状态的背景色 return Colors.white; }), // 按钮阴影 shadowColor: MaterialStateProperty.all(Colors.grey), elevation: MaterialStateProperty.all(20), // 按钮边框 side: MaterialStateProperty.all( const BorderSide( color: Colors.green, width: 2, ), ), // 按钮形状 shape: MaterialStateProperty.all( // 圆形按钮 // const CircleBorder( // side: BorderSide( // color: Colors.green, // width: 2, // ), // ), // 椭圆按钮 const StadiumBorder( side: BorderSide( color: Colors.green, width: 2, ), ), ), // 按钮大小 minimumSize: MaterialStateProperty.all( const Size(200, 100), ), // 水波纹的颜色 overlayColor: MaterialStateProperty.all( Colors.purple, ), ), ), OutlinedButtonTheme( data: OutlinedButtonThemeData( style: ButtonStyle( overlayColor: MaterialStateProperty.all(Colors.red), ), ), child: OutlinedButton( onPressed: () {}, child: const Text('轮廓按钮'), // 此处的style会覆盖上面的style样式 style: ButtonStyle( overlayColor: MaterialStateProperty.all(Colors.blue), ), ), ), // 图标按钮 IconButton( onPressed: () {}, icon: const Icon(Icons.add), color: Colors.red, splashColor: Colors.lightBlue, ), ], ), ), ); } }
按钮组
import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('ButtonBar'), ), body: Container( padding: const EdgeInsets.all(10), child: Column( children: [ // 按钮组：默认单行右对齐，溢出垂直分布 Container( width: double.infinity, color: Colors.pink, child: ButtonBar( children: [ ElevatedButton( onPressed: () {}, child: const Text('按钮一'), ), ElevatedButton( onPressed: () {}, child: const Text('按钮二'), ), ElevatedButton( onPressed: () {}, child: const Text('按钮三'), ), ElevatedButton( onPressed: () {}, child: const Text('按钮四'), ), ElevatedButton( onPressed: () {}, child: const Text('按钮五'), ), ElevatedButton( onPressed: () {}, child: const Text('按钮六'), ), ], ), ), ], ), ), ); } }
特殊的常用按钮
import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('特殊按钮'), ), body: Container( padding: const EdgeInsets.all(10), child: Column( children: const [ // 返回按钮 BackButton(), // 关闭按钮 CloseButton( color: Colors.red, ) ], ), ), // 浮动按钮 floatingActionButton: FloatingActionButton( onPressed: () {}, tooltip: 'Create', child: const Icon(Icons.add), backgroundColor: Colors.green, ), ); } }
