浅识Flutter 基本组件之按钮组件 Raisebutton\ FlatButton\ OutlineButton按钮

按钮组件
按钮组件是应用程序中用于交互的最常用的组件之一, MaterialWidget库中提供了多种按钮Widget,如 RaisedButton(凸起按钮组件)、FlatButton(扁平按钮组件）和OutlineButton(带边框按钮组件)等，它们都是直接或间接对RawMaterialButton的包装定制,从而形成不同的外观样式，所以它们的属性和使用方法基本一样.

属性名	类型	说明
color	Color	设置按钮的颜色
textColor	Color	设置按钮上的文本颜色，onPressed属性不为null时生效
disabledTextColor	Color	设置按钮禁用时文本的颜色．默认为主题里的禁用颜色
disabledColor	Color	设置按钮禁用时的颜色．默认为主题里的禁用颜色
onPressed	VoidCallback	设置按下按钮时触发的回调．如果属性值为null，则表示按钮禁用，会显示禁用相关样式
child	Widget	设置显示在按钮上的组件.通常为Text组件
enable	bool	设置按钮是否为可用状态．默认值为true
splashcColor	Color	设置点击按钮时水波纹的颜色
highlightColor	Color	设置长按按钮后按钮的颜色
elevation	double	设置阴影的范围．值越大阴影范围越大
padding	EdgeInsetsGeometry	设置内边距
shape	ShapeBorder	设置按钮的形状
minWidth	double	设置按钮的最小宽度
height	double	设置按钮的高度
colorBrightness	Brightness	设置按钮高亮显示.取值可以为Brightness.light或 Brightness.dark

1. Raisebutton

RaisedButton按钮默认有阴影和灰色背景，在按下后阴影还会逐渐变深。
下面列出8种类型的Raisebutton按钮实现代码，读者可以将这些代码稍作变
化后应用到实际的应用开发场景中。
(1)默认按钮
(2) 带有文本、背景颜色按钮
(3)带有文本、背景颜色的禁用按钮
(4) 带有按下时水波纹颜色按钮
(5) 带有主题高亮按钮
(6)带有下面阴影大小按钮
(7)带有高亮时阴影按钮代
(8)带有水波纹高亮变化回调事件按钮

创建两个按钮

RaisedButton(
            onPressed: () {
    
    },
            child: Text('确定'),
          ),
RaisedButton(
            onPressed: () {
    
    },
            child: Text('取消'),
          )

在这里插入图片描述

textColor: Colors.blue,//按钮中文本的颜色

在这里插入图片描述

highlightColor: Colors.red,//长按按钮后的颜色

在这里插入图片描述
按下按钮后的水波效果；

splashColor: Colors.yellow,

点击看视频效果

其他的属性

            colorBrightness:Brightness.light ,//带有主题高亮的按钮颜色
            elevation: 10,//带阴影
            highlightElevation: 50,//带阴影的高亮按钮

 RaisedButton(
            onPressed: () {
    
    },
            child: Text('确定'),
            textColor: Colors.blue,//按钮中文本的颜色
            splashColor: Colors.yellow,//长按按钮后的水波效果
            colorBrightness:Brightness.light ,//带有主题高亮的按钮颜色
            elevation: 10,//带阴影
            highlightElevation: 50,//带阴影的高亮按钮
            /*带水波纹高亮变化回调的方法*/
            onHighlightChanged:(b){
    
    
              print(b);
            } ,
          ),

按下返回true 松开返回false
在这里插入图片描述

2. FlatButton

FlatButton按钮默认情况下背景透明并不带阴影，按下后会有背景色。

FlatButton(onPressed: () {
    
    }, child: Text('三阿哥')),

FlatButton按钮
在这里插入图片描述

按下后效果（变化的）

在这里插入图片描述

3. OutlineButton

OutlineButton按钮默认情况下没有阴影且背景透明，按下后边框的颜色
会变亮，同时出现背景和阴影。

OutlineButton按钮
在这里插入图片描述

按下后效果（变化的）
在这里插入图片描述

OutlineButton(
            onPressed: () {
    
    },
            child: Text('四阿哥'),
            borderSide: BorderSide(color:Colors.blue,//设置边框颜色
              width:5,//边框粗细
               style: BorderStyle.solid//边框的线性
              ),

在这里插入图片描述

完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class agesuopage extends StatefulWidget {
    
    
  @override
  State<StatefulWidget> createState() {
    
    
    return MyState();
  }
}

class MyState extends State {
    
    
  @override
  String info = '初始化';
  TextEditingController controller = TextEditingController();
  void getvalue() {
    
    
    setState(() {
    
    
      info = controller.text;
    });
  }

  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('阿哥所'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          TextField(
            controller: controller,
          ),
          Text(info),
          RaisedButton(
            onPressed: () {
    
    },
            child: Text('确定'),
            textColor: Colors.blue, //按钮中文本的颜色
            // highlightColor: Colors.red,//长按按钮后的颜色
            splashColor: Colors.yellow, //长按按钮后的水波效果
            colorBrightness: Brightness.light, //带有主题高亮的按钮颜色
            elevation: 10, //带阴影
            highlightElevation: 50, //带阴影的高亮按钮
            /*带水波纹高亮变化回调的方法*/
            onHighlightChanged: (b) {
    
    
              print(b);
            },
          ),
          RaisedButton(
            onPressed: () {
    
    },
            child: Text('取消'),
            // disabledColor:Colors.yellow,
          ),
          FlatButton(onPressed: () {
    
    }, child: Text('三阿哥')),
          OutlineButton(
            onPressed: () {
    
    },
            child: Text('四阿哥'),
            borderSide: BorderSide(color:Colors.blue,//设置边框颜色
              width:5,//边框粗细
               style: BorderStyle.solid//边框的线性
              ),

          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
    
    
          getvalue();
        }, //设置点击事件，点击按钮，将文本值送到下面info
        child: Text('背书'),
      ),
    );
  }
}