电竞比分网-中国电竞赛事及体育赛事平台

搜索
分享

Flutter學(xué)習(xí)筆記（20）--FloatingActionButton、PopupMenuButton、SimpleDialog、AlertDialog、SnackBar

 頭號(hào)碼甲 2020-09-26

如需轉(zhuǎn)載，請(qǐng)注明出處：Flutter學(xué)習(xí)筆記（20）--FloatingActionButton、PopupMenuButton、SimpleDialog、AlertDialog、SnackBar

  • FloatingActionButton

FloatingActionButton對(duì)應(yīng)一個(gè)圓形圖標(biāo)按鈕，懸停在內(nèi)容之上，以展示對(duì)應(yīng)程序中的主要?jiǎng)幼?，所以非常醒目，類似于iOS系統(tǒng)里的小白點(diǎn)按鈕。

FloatingActionButton組件屬性及描述如下：

  1. child：child一般為icon，不推薦使用文字
  2. tooltip：按鈕提示文字
  3. foregroundColor：前景色
  4. backgroundColor：背景色
  5. elevation：未點(diǎn)擊時(shí)陰影值，默認(rèn)6.0
  6. hignlightElevation：點(diǎn)擊時(shí)陰影值
  7. onPressed：點(diǎn)擊事件回調(diào)
  8. shape：定義按鈕的shape，設(shè)置shape時(shí)，默認(rèn)的elevation將會(huì)失效，默認(rèn)為CircleBorder
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'FloatingButton Demo',
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('FloatingButton Demo'),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              UserAccountsDrawerHeader(
                  accountName: new Text('FloatingButton Demo'),
                  accountEmail: new Text('www.baidu.com'),
                  currentAccountPicture: new CircleAvatar(
                    backgroundImage: AssetImage('images/user.jpeg'),
                  ),
              ),
              ListTile(
                title: new Text('我是主標(biāo)題'),
                leading: Icon(Icons.add_circle_outline),
                subtitle: new Text('我是副標(biāo)題'),
              ),
              ListTile(
                title: new Text('我是主標(biāo)題'),
                leading: Icon(Icons.add_circle_outline),
                subtitle: new Text('我是副標(biāo)題'),
              ),
              ListTile(
                title: new Text('我是主標(biāo)題'),
                leading: Icon(Icons.add_circle_outline),
                subtitle: new Text('我是副標(biāo)題'),
              ),
              ListTile(
                title: new Text('我是主標(biāo)題'),
                leading: Icon(Icons.add_circle_outline),
                subtitle: new Text('我是副標(biāo)題'),
              )
            ],
          ),
        ),
        floatingActionButton: new Builder(builder: (BuildContext context){
          return new FloatingActionButton(
              child: Icon(Icons.album),
              foregroundColor: Colors.amberAccent,
              backgroundColor: Colors.deepPurple,
              elevation: 10.0,
              highlightElevation: 20.0,
              mini: false,
              onPressed: (){
                Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('點(diǎn)擊了FloatingButton')));
              }
          );
        }),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }

}

 

 

  • PopupMenuButton

構(gòu)造方法：

  const PopupMenuButton({
    Key key,
    @required this.itemBuilder,//item子項(xiàng)，可以為任意類型
    this.initialValue,//初始值
    this.onSelected,//選中其中一項(xiàng)時(shí)回調(diào)
    this.onCanceled,//點(diǎn)擊空白處，不選擇時(shí)回調(diào)
    this.tooltip,//提示
    this.elevation = 8.0,//陰影大小
    this.padding = const EdgeInsets.all(8.0),//padding
    this.child,
    this.icon,
    this.offset = Offset.zero,
  }) : assert(itemBuilder != null),
        assert(offset != null),
        assert(!(child != null && icon != null)), // fails if passed both parameters
        super(key: key);

 

demo示例：

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

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'FloatingButton Demo',
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        body: new Center(
          child: _showPopupMenuButton(),
        ),
        appBar: AppBar(
          title: new Text('FloatingButton Demo'),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              UserAccountsDrawerHeader(
                  accountName: new Text('FloatingButton Demo'),
                  accountEmail: new Text('www.baidu.com'),
                  currentAccountPicture: new CircleAvatar(
                    backgroundImage: AssetImage('images/user.jpeg'),
                  ),
              ),
              ListTile(
                title: new Text('我是主標(biāo)題'),
                leading: Icon(Icons.add_circle_outline),
                subtitle: new Text('我是副標(biāo)題'),
              ),
              ListTile(
                title: new Text('我是主標(biāo)題'),
                leading: Icon(Icons.add_circle_outline),
                subtitle: new Text('我是副標(biāo)題'),
              ),
              ListTile(
                title: new Text('我是主標(biāo)題'),
                leading: Icon(Icons.add_circle_outline),
                subtitle: new Text('我是副標(biāo)題'),
              ),
              ListTile(
                title: new Text('我是主標(biāo)題'),
                leading: Icon(Icons.add_circle_outline),
                subtitle: new Text('我是副標(biāo)題'),
              )
            ],
          ),
        ),
        floatingActionButton: new Builder(builder: (BuildContext context){
          return new FloatingActionButton(
              child: Icon(Icons.album),
              foregroundColor: Colors.amberAccent,
              backgroundColor: Colors.deepPurple,
              elevation: 10.0,
              highlightElevation: 20.0,
              mini: false,
              onPressed: (){
              },
          );
        }),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }

  PopupMenuButton _showPopupMenuButton() {
    return PopupMenuButton(
      icon: Icon(Icons.menu),
        itemBuilder: (BuildContext context) => <PopupMenuEntry>[
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton1"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton2"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton3"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton4"),
            ),
          ),
        ]
    );
  }
}

 

效果截圖：

   

  • SimpleDialog

 

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

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'FloatingButton Demo',
      debugShowCheckedModeBanner: false,
      home: mHomePage(),
    );
  }
}

class mHomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _mHomePage();
  }
}

class _mHomePage extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      body: new Center(
        child: _showPopupMenuButton(),
      ),
      appBar: AppBar(
        title: new Text('FloatingButton Demo'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: new Text('FloatingButton Demo'),
              accountEmail: new Text('www.baidu.com'),
              currentAccountPicture: new CircleAvatar(
                backgroundImage: AssetImage('images/user.jpeg'),
              ),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            )
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: Icon(Icons.album),
        foregroundColor: Colors.amberAccent,
        backgroundColor: Colors.deepPurple,
        elevation: 10.0,
        highlightElevation: 20.0,
        mini: false,
        onPressed: (){
            _showSimpleDialog(context);
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

  PopupMenuButton _showPopupMenuButton() {
    return PopupMenuButton(
        icon: Icon(Icons.menu),
        itemBuilder: (BuildContext context) => <PopupMenuEntry>[
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton1"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton2"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton3"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton4"),
            ),
          ),
        ]
    );
  }

  void _showSimpleDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context){
          return SimpleDialog(
            title: new Text('SimpleDialog Demo'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('選項(xiàng)1'),
              ),
              SimpleDialogOption(
                child: Text('選項(xiàng)2'),
                onPressed: (){
                  Navigator.pop(context);
                },
              ),
            ],
          );
        }
    );
  }
}

 

效果截圖：

  • AlertDialog

AlertDialog常用屬性：

  const AlertDialog({
    Key key,
    this.title,//對(duì)話框頂部提示文案
    this.titlePadding,
    this.titleTextStyle,//對(duì)話框頂部提示文案字體樣式
    this.content,//內(nèi)容部分，對(duì)話框的提示內(nèi)容，通常為文字
    this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
    this.contentTextStyle,//對(duì)話框提示內(nèi)容的字體樣式
    this.actions,//對(duì)話框底部操作按鈕
    this.backgroundColor,//對(duì)話框背景色
    this.elevation,
    this.semanticLabel,
    this.shape,
  }) : assert(contentPadding != null),
       super(key: key);

 

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

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'FloatingButton Demo',
      debugShowCheckedModeBanner: false,
      home: mHomePage(),
    );
  }
}

class mHomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _mHomePage();
  }
}

class _mHomePage extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      body: new Center(
        child: _showPopupMenuButton(),
      ),
      appBar: AppBar(
        title: new Text('FloatingButton Demo'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: new Text('FloatingButton Demo'),
              accountEmail: new Text('www.baidu.com'),
              currentAccountPicture: new CircleAvatar(
                backgroundImage: AssetImage('images/user.jpeg'),
              ),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            )
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: Icon(Icons.album),
        foregroundColor: Colors.amberAccent,
        backgroundColor: Colors.deepPurple,
        elevation: 10.0,
        highlightElevation: 20.0,
        mini: false,
        onPressed: (){
//            _showSimpleDialog(context);
          _showAlertDialog(context);
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

  PopupMenuButton _showPopupMenuButton() {
    return PopupMenuButton(
        icon: Icon(Icons.menu),
        itemBuilder: (BuildContext context) => <PopupMenuEntry>[
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton1"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton2"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton3"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton4"),
            ),
          ),
        ]
    );
  }

  void _showSimpleDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context){
          return SimpleDialog(
            title: new Text('SimpleDialog Demo'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('選項(xiàng)1'),
              ),
              SimpleDialogOption(
                child: Text('選項(xiàng)2'),
                onPressed: (){
                  Navigator.pop(context);
                },
              ),
            ],
          );
        }
    );
  }

  void _showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context){
        return AlertDialog(
          title: new Text('提示'),
          content: new Text('這是提示框的內(nèi)容'),
          actions: <Widget>[
            FlatButton(onPressed: null, child: new Text('確定'),disabledTextColor: Colors.blueAccent,),
            FlatButton(onPressed: null, child: new Text('取消'),disabledColor: Colors.deepPurple,),
          ],
        );
      }
    );
  }
}

 

效果截圖：

  • SnackBar

SnackBar是一個(gè)輕量級(jí)消息提示組件，在屏幕的底部顯示，SnackBar常用屬性如下：

  const SnackBar({
    Key key,
    @required this.content,//提示內(nèi)容
    this.backgroundColor,//背景色
    this.action,
    this.duration = _kSnackBarDisplayDuration,//提示時(shí)常
    this.animation,//彈出動(dòng)畫
  }) : assert(content != null),
       assert(duration != null),
       super(key: key);

 

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

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'FloatingButton Demo',
      debugShowCheckedModeBanner: false,
      home: mHomePage(),
    );
  }
}

class mHomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _mHomePage();
  }
}

class _mHomePage extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      body: new Center(
        child: _showPopupMenuButton(),
      ),
      appBar: AppBar(
        title: new Text('FloatingButton Demo'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: (){
            Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('SnackBar')));
          })
        ],
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: new Text('FloatingButton Demo'),
              accountEmail: new Text('www.baidu.com'),
              currentAccountPicture: new CircleAvatar(
                backgroundImage: AssetImage('images/user.jpeg'),
              ),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            ),
            ListTile(
              title: new Text('我是主標(biāo)題'),
              leading: Icon(Icons.add_circle_outline),
              subtitle: new Text('我是副標(biāo)題'),
            )
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: Icon(Icons.album),
        foregroundColor: Colors.amberAccent,
        backgroundColor: Colors.deepPurple,
        elevation: 10.0,
        highlightElevation: 20.0,
        mini: false,
        onPressed: (){
//            _showSimpleDialog(context);
          _showAlertDialog(context);
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

  PopupMenuButton _showPopupMenuButton() {
    return PopupMenuButton(
        icon: Icon(Icons.menu),
        itemBuilder: (BuildContext context) => <PopupMenuEntry>[
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton1"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton2"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton3"),
            ),
          ),
          const PopupMenuItem(
            child: ListTile(
              leading: Icon(Icons.add_circle_outline),
              title: Text("popupMenuButton4"),
            ),
          ),
        ]
    );
  }

  void _showSimpleDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context){
          return SimpleDialog(
            title: new Text('SimpleDialog Demo'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('選項(xiàng)1'),
              ),
              SimpleDialogOption(
                child: Text('選項(xiàng)2'),
                onPressed: (){
                  Navigator.pop(context);
                },
              ),
            ],
          );
        }
    );
  }

  void _showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context){
        return AlertDialog(
          title: new Text('提示'),
          content: new Text('這是提示框的內(nèi)容'),
          actions: <Widget>[
            FlatButton(onPressed: null, child: new Text('確定'),disabledTextColor: Colors.blueAccent,),
            FlatButton(
              onPressed: (){
                Navigator.pop(context);
                Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('SnackBar')));
              },
              child: new Text('取消'),disabledColor: Colors.deepPurple,),
          ],
          backgroundColor: Colors.amberAccent,
        );
      }
    );
  }
}

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多