Flutter开发（十九）—— 按钮

按钮组件：
1、FloatingActionButton

main.dart 设定默认路由，Theme主题配置：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      initialRoute: '/',
      // routes:
      routes: {
        '/': (context) => MaterialComponents(),
      },
    );
  }
}

MaterialComponents.dart 使用ListView组件，展示即将要演示的按钮组件的页面列表：

import 'package:flutter/material.dart';
import 'demo/FloatingButtonDemo.dart';
import 'demo/buttonDemo.dart';
import 'demo/popupMenuButtonDemo.dart';
import 'demo/PopupTitleBar.dart';

class MaterialComponents extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('data'),
        elevation: 0.0, 
      ),
      body: ListView(
        //ListView 增加padding
        padding: EdgeInsets.all(30.0),
        children: <Widget>[
          // FloatingButton 悬浮按钮
          ListItem(title: 'FloatingButton', page: FloatingButtonDemo()),
          // PopupMenuButton 弹出列表
          ListItem(title: 'PopupMenuButton', page: PopupMenuButtonDemo()),
          // TitleBar 弹出列表
          ListItem(title: 'PopupTitleBar', page: PopupTitleBarDemo()),
          buttonDemo().getFlatButtonText(),//引入 只带文字 FlatButton
          buttonDemo().getFlatButtonIcon(),//引入 只带Icon FlatButton
          buttonDemo().getRaisedButtonText(),
          buttonDemo().getRaisedButtonIcon(),
          buttonDemo().getOutlineButtonText(),
          buttonDemo().getOutlineButtonIcon(),
          buttonDemo().getRowButton(),
          buttonDemo().getButtonBar(context),
          
        ],
      ),
    );
  }
}

class ListItem extends StatelessWidget {
  final String title;
  final Widget page;
  ListItem({this.title, this.page});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      onTap: () {
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => page));
      },
    );
  }
}

一、FloatingButtonDemo.dart 漂浮动作按钮，演示代码：

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

class FloatingButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: getScaffoldkey(), // 获取Scaffoldkey
      appBar: AppBar(
        title: Text('FloatingButton'),
        elevation: 0.0,
      ),
      floatingActionButton: _floatingActionButton(context),
      // floatingActionButtonLocation调整位置，centerDocked居中且重叠
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      // 添加 BottomAppBar
      bottomNavigationBar: BottomAppBar(
        color: Colors.purple,
        child: Container(
          height: 60.0, //设置BottomAppBar的高度
        ),
        //Circular Notched Rectangle 圆形缺口组件
        shape: CircularNotchedRectangle(),
      ),
    );
  }

  //构建 FloatingActionButton
  Widget _floatingActionButton(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        showSnackbar('点击了FloatingActionButton'); //展示 Snackbar
      }, //点击后处理的事件
      child: Icon(Icons.add),
      elevation: 0.0,
      backgroundColor: Colors.blueAccent, //设置背景颜色
      //设置按钮形状,默认是圆形。BeveledRectangleBorder 斜角矩形
      shape: BeveledRectangleBorder(
        borderRadius: BorderRadius.circular(15.0), //设置0.0是正方形
      ),
    );
  }
}

演示效果：

二、popupMenuButtonDemo.dart

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

class PopupMenuButtonDemo extends StatefulWidget {
  @override
  _PopupMenuButtonDemoState createState() => _PopupMenuButtonDemoState();
}

class _PopupMenuButtonDemoState extends State<PopupMenuButtonDemo> {
  String _currentMenuitem = '东';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: getScaffoldkey(),
      appBar: AppBar(
        title: Text('PopupMenuButton'),
        elevation: 10.0,
      ),
      body: Container(
        padding: EdgeInsets.all(15.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _currentMenuitem,
              style: TextStyle(color: Colors.red, fontSize: 30.0),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                PopupMenuButton(
                    onSelected: (String value) {
                      showSnackbar('$value');
                      setState(() {
                        _currentMenuitem = value;
                      });
                    },
                    itemBuilder: (BuildContext context) =>
                        <PopupMenuItem<String>>[
                          PopupMenuItem(
                            value: '选中—东',
                            child: Text('东'),
                          ),
                          PopupMenuItem(
                            value: '选中—南',
                            child: Text('南'),
                          ),
                          PopupMenuItem(
                            value: '选中—西',
                            child: Text('西'),
                          ),
                          PopupMenuItem(
                            value: '选中—北',
                            child: Text('北'),
                          ),
                        ])
              ],
            )
          ],
        ),
      ),
    );
  }
}

演示效果：

三、PopupTitleBar.dart

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

class PopupTitleBarDemo extends StatefulWidget {
  @override
  _PopupTitleBarDemoState createState() => new _PopupTitleBarDemoState();
}

class _PopupTitleBarDemoState extends State<PopupTitleBarDemo> {
  String _bodyStr = "显示菜单内容";
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: getScaffoldkey(),
      appBar: new AppBar(
        title: new Text("PopupTitleBar"),
        actions: <Widget>[
          new PopupMenuButton(
              onSelected: (String value) {
                setState(() {
                  _bodyStr = value;
                  showSnackbar(value);
                });
              },
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                    new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
                    new PopupMenuItem(value: "选项二的内容", child: new Text("选项二"))
                  ])
        ],
      ),
      body: new Center(
        child: new Text(_bodyStr),
      ),
    );
  }
}

演示效果：

四、buttonDemo.dart 中介绍了以下Button组件。
FlatButton（带或不带Icon）、RaisedButton（带或不带Icon）、OutlineButton（带或不带Icon），Row与Button组合、ButtonBar

import 'package:flutter/material.dart';

class buttonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }

//--------------FlatButton----------------------
  // FlatButton 组件
  Widget _flatButtonText = FlatButton(
    child: Text('FlatButton'), //按钮文字
    textColor: Colors.purple, //按钮文字颜色
    onPressed: () {}, //按钮点击事件
    splashColor: Colors.grey, //点击时溅墨效果颜色
  );

  Widget getFlatButtonText() {
    return _flatButtonText;
  }

  // FlatButton 组件带Icon
  Widget _flatButtonIcon = FlatButton.icon(
    icon: Icon(Icons.add_a_photo), //按钮图标
    label: Text('FlatButtonIcon'), //按钮文字
    onPressed: () {},
    splashColor: Colors.blueAccent,
    textColor: Colors.blueAccent,
  );

  Widget getFlatButtonIcon() {
    return _flatButtonIcon;
  }

  //---------------RaisedButton---------------------

  // RaisedButton 组件
  Widget _raisedButtonText = RaisedButton(
    child: Text('RaisedButton'), //按钮文字
    textColor: Colors.purple, //按钮文字颜色
    onPressed: () {}, //按钮点击事件
    splashColor: Colors.grey, //点击时溅墨效果颜色
    elevation: 5.0,
    shape: StadiumBorder(), //Stadium Border翻译体育场边界,所以像跑道
  );

  Widget getRaisedButtonText() {
    return _raisedButtonText;
  }

  // RaisedButton 组件带Icon
  Widget _raisedButtonIcon = RaisedButton.icon(
    icon: Icon(Icons.add_a_photo), //按钮图标
    label: Text('RaisedButtonIcon'), //按钮文字
    onPressed: () {},
    splashColor: Colors.blueAccent,
    textColor: Colors.blueAccent,
    elevation: 1.0,
    //倒角，像菱形
    shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(60.0)),
  );

  Widget getRaisedButtonIcon() {
    return _raisedButtonIcon;
  }

  //---------------OutlineButton---------------------

  // OutlineButton 组件 描边按钮
  Widget _outlineButtonText = OutlineButton(
    child: Text('RaisedButton'), //按钮文字
    textColor: Colors.purple, //按钮文字颜色
    onPressed: () {}, //按钮点击事件
    splashColor: Colors.grey, //点击时溅墨效果颜色
    shape: StadiumBorder(), //Stadium Border翻译体育场边界,所以像跑道
    //设置 描边颜色
    borderSide: BorderSide(color: Colors.black),
    highlightedBorderColor: Colors.red, //点击时，边框变色
  );

  Widget getOutlineButtonText() {
    return _outlineButtonText;
  }

  // OutlineButton 组件带Icon
  Widget _outlineButtonIcon = OutlineButton.icon(
    icon: Icon(Icons.add_a_photo), //按钮图标
    label: Text('RaisedButtonIcon'), //按钮文字
    onPressed: () {},
    splashColor: Colors.blueAccent,
    textColor: Colors.blueAccent,
    //倒角，像菱形
    shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(60.0)),
    //设置 描边颜色
    borderSide: BorderSide(
      color: Colors.deepPurple,
    ),
  );

  Widget getOutlineButtonIcon() {
    return _outlineButtonIcon;
  }

  //---------------Row---------------------
  // Expanded 与 Row 配合使用，会让Button 等分占用所有空间
  Widget _rowButton = Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      //Expanded 包裹OutlineButton 可以自适应，占完剩余空间
      Expanded(
        child: OutlineButton(
          child: Text('Button'),
          onPressed: () {},
          splashColor: Colors.deepPurple,
          borderSide: BorderSide(
            color: Colors.black,
          ),
          textColor: Colors.black,
          highlightedBorderColor: Colors.grey,
        ),
      ),
      SizedBox(
        width: 25.0,
      ),
      Container(
        width: 150.0, //Container 包裹OutlineButton 可以指定尺寸
        child: OutlineButton(
          child: Text('Button'),
          onPressed: () {},
          splashColor: Colors.deepPurple,
          shape: StadiumBorder(),
          borderSide: BorderSide(
            color: Colors.black,
          ),
          textColor: Colors.black,
          highlightedBorderColor: Colors.grey,
        ),
      ),
      SizedBox(
        width: 25.0,
      ),
      Expanded(
        child: OutlineButton(
          child: Text('Button'),
          onPressed: () {},
          splashColor: Colors.deepPurple,
          borderSide: BorderSide(
            color: Colors.black,
          ),
          textColor: Colors.black,
          highlightedBorderColor: Colors.grey,
        ),
      ),
    ],
  );

  Widget getRowButton() {
    return _rowButton;
  }

  //---------------ButtonBar-----按钮横向排布----------------
  Widget getButtonBar(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        buttonTheme: ButtonThemeData(
          //设置水平方向边距
          padding: EdgeInsets.symmetric(horizontal: 25.0)
        )
      ),
      child: ButtonBar(
        children: <Widget>[
          OutlineButton(
            child: Text('RaisedButton'), //按钮文字
            textColor: Colors.purple, //按钮文字颜色
            onPressed: () {}, //按钮点击事件
            splashColor: Colors.grey, //点击时溅墨效果颜色
            shape: StadiumBorder(), //Stadium Border翻译体育场边界,所以像跑道
            //设置 描边颜色
            borderSide: BorderSide(color: Colors.black),
            highlightedBorderColor: Colors.red, //点击时，边框变色
          ),
          OutlineButton(
            child: Text('RaisedButton'), //按钮文字
            textColor: Colors.purple, //按钮文字颜色
            onPressed: () {}, //按钮点击事件
            splashColor: Colors.grey, //点击时溅墨效果颜色
            shape: StadiumBorder(), //Stadium Border翻译体育场边界,所以像跑道
            //设置 描边颜色
            borderSide: BorderSide(color: Colors.black),
            highlightedBorderColor: Colors.red, //点击时，边框变色
          ),
        ],
      ),
    );
  }
}

演示效果：

showSnackbar.dart 弹出Snackbar简单封装：

import 'package:flutter/material.dart';
  // Snackbar
  void showSnackbar(String message){
    var snackBar = SnackBar(content: Text(message),);
    _scaffoldkey.currentState.showSnackBar(snackBar);
  }

  var _scaffoldkey = new GlobalKey<ScaffoldState>();

  getScaffoldkey(){
    return _scaffoldkey;
  }