Flutter：Button Widget的使用

Flutter学习咒语"Flutter一切皆组件 !"

Flutter按钮

Material widget库中提供了多种按钮Widget如RaisedButton、FlatButton、OutlineButton等，它们都是直接或间接对RawMaterialButton的包装定制，所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观，而按钮的外观大都可以通过属性来自定义，我们在后面统一介绍这些属性。另外，所有Material 库中的按钮都有如下相同点：

按下时都会有“水波动画”。
有一个onPressed属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

下面我们一起简单看看

RaisedButton

RaisedButton "漂浮"按钮，默认带有阴影和灰色背景。按下后，阴影会变大，通过代码看一下效果：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: (RaisedButton(
            child: Text("RaisedButton"),
            //这个方法要加上，不然是看不到点击效果的
            onPressed: () => {},
          )),
        ),
      ),
    );
  }
}

看一下效果：

RaisedButton.gif

FlatButton

FlatButton即扁平按钮，默认背景透明并不带阴影。按下后，会有背景色
看一下代码，可以自己动手试一下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: (
              FlatButton(
                child: Text("FlatButton"),
                //这个方法要加上，不然是看不到点击效果的
                onPressed: () => {},
              )
          ),
        ),
      ),
    );
  }
}

OutlineButton

OutlineButton默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)：
代码块

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: (
              OutlineButton(
                child: Text("OutlineButton"),
                //这个方法要加上，不然是看不到点击效果的
                onPressed: () => {},
              )
          ),
        ),
      ),
    );
  }
}

IconButton

IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景：
代码块

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: (
              IconButton(
                icon: Icon(Icons.thumb_up),
                //这个方法要加上，不然是看不到点击效果的
                onPressed: () => {},
              )
          ),
        ),
      ),
    );
  }
}

自定义按钮外观

const FlatButton({
  ...  
  @required this.onPressed, //按钮点击回调
  this.textColor, //按钮文字颜色
  this.disabledTextColor, //按钮禁用时的文字颜色
  this.color, //按钮背景颜色
  this.disabledColor,//按钮禁用时的背景颜色
  this.highlightColor, //按钮按下时的背景颜色
  this.splashColor, //点击时，水波动画中水波的颜色
  this.colorBrightness,//按钮主题，默认是浅色主题 
  this.padding, //按钮的填充
  this.shape, //外形
  @required this.child, //按钮的内容
})

看一下代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: (
              FlatButton(
                color: Colors.red,
                highlightColor: Colors.blue[800],
                colorBrightness: Brightness.dark,
                splashColor: Colors.grey,
                child: Text("FlatButton"),
                shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
                onPressed: () => {},
              )
          ),
        ),
      ),
    );
  }
}

效果图：

自定义按钮外观

假若我们需要去除背景，则可以通过将背景颜色设置为全透明来实现。对应上面的代码，便是将 color: Colors.red 替换为 color: Color(0x000000)。
感谢阅读，谢谢～

最后编辑于：2019.07.23 18:56:04