Flutter 里有很多的 Button 组件很多,常见的按钮组件有:ElevatedButton、TextButton、IconButton、OutlinedButton、ButtonBar、FloatingActionButton 等。
ElevatedButton(旧版本的RaisedButton) :凸起的按钮,其实就是 Material Design 风格的 Button,较RaisedButton,ElevatedButton会自带背景色
OutlinedButton(旧版本OutlineButton):线框按钮,默认有一个边框,不带阴影且背景透明.按下后,边框颜色会变亮、同时出现背景和阴影(通过side配置边框);
TextButton(旧版本FlatButton):文本按钮,默认背景透明并不带阴影.按下后,会有背景色
IconButton :图标按钮,是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景,默认用于导航条;
ButtonBar:按钮组,可以默认实现一个按钮组,通过 children 属性可以传入多个 Button。
FloatingActionButton:浮动按钮,我们会单独拎出来演示
常用属性:
新增的三个Button组件:ElevatedButton,OutlinedButton,TextButton三者用法基本一致,所以三者基本只演示了ElevatedButton,想详细了解的可以看看这个博主的*Flutter的button的按钮ElevatedButton ,总结的非常详细
基本按钮组件及样式演示:
import 'package:flutter/material.dart';
class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [IconButton(onPressed: () {
}, icon: Icon(Icons.settings))],
),
body: Column