Flutter常用button组件及自定义按钮组件_flutter button

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15