flutter14 - 按钮

Flutter14 - 按钮

Material组件库中的按钮

RaisedButton 漂浮按钮,默认有阴影和背景

FlatButton扁平按钮 默认背景透明不带阴影

OutlineButton 边框按钮,默认有一个边框

IconButton 一个可点击的icon,不包括文字,默认没有背景

带图标的按钮

RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮，

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('文本及其样式'),
        ),
        body: TextDemo(),
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("RaisedButton 漂浮按钮,默认有阴影和背景"),
            onPressed: () {
              print("点击了RaisedButton漂浮按钮");
            },
          ),
          FlatButton(
            child: Text("FlatButton扁平按钮 默认背景透明不带阴影"),
            onPressed: () {
              print("点击了FlatButton扁平按钮");
            },
          ),
          OutlineButton(
            child: Text("OutlineButton 边框按钮,默认有一个边框"),
            onPressed: () {
              print("点击了OutlineButton 边框按钮");
            },
          ),
          IconButton(
            icon: Icon(Icons.access_time),
            onPressed: () {},
          ),
          RaisedButton.icon(
            icon: Icon(Icons.access_time),
            label: Text("RaisedButton.icon"),
            onPressed: () {
              print("点击了RaisedButton漂浮按钮");
            },
          ),
          FlatButton.icon(
            icon: Icon(Icons.access_time),
            label: Text("FlatButton.icon"),
            onPressed: () {
              print("点击了FlatButton扁平按钮");
            },
          ),
          OutlineButton.icon(
            icon: Icon(Icons.access_time),
            label: Text("OutlineButton.icon"),
            onPressed: () {
              print("点击了OutlineButton 边框按钮");
            },
          ),
        ],
      ),
    );
  }
}

自定义按钮外观

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 StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义按钮'),
        ),
        body: TextDemo(),
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          FlatButton(
            color: Colors.blue,
            //按钮背景颜色
            highlightColor: Colors.blue[700],
            //按钮按下时的背景颜色
            child: Text('Submit'),
            //子控件
            splashColor: Colors.grey,
            colorBrightness: Brightness.dark,
            //按钮主题,默认是浅色
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            onPressed: () {},
          )
        ],
      ),
    );
  }
}