文章目录

SimpleDialog：显示对话框2 SimpleDialog：选项（SimpleDialogOption）3 SimpleDialog：获取与使用选项的值5 AlertDialog：提示对话框.mp4和获取与使用动作的值6 BottomSheet：底部滑动窗口, BottomSheet：对话框式底部滑动窗口（showModalBottomSheet）9 SnackBar：操作提示栏10 ExpansionPanel：收缩面板

SimpleDialog：显示对话框

import 'package:flutter/material.dart'; class SimpleDialogDemo extends StatefulWidget { SimpleDialogDemo({Key key}) : super(key: key); @override _SimpleDialogDemoState createState() => _SimpleDialogDemoState(); } class _SimpleDialogDemoState extends State<SimpleDialogDemo> { _openSimpleDialog(){ showDialog( context:context, builder: (BuildContext context){ return SimpleDialog( title: Text('SimpleDialog'), children: [], ); } ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Dialog'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.format_list_numbered), onPressed: _openSimpleDialog ), ); } }

2 SimpleDialog：选项（SimpleDialogOption）

_openSimpleDialog(){ showDialog( context:context, builder: (BuildContext context){ return SimpleDialog( title: Text('SimpleDialog'), children: [ SimpleDialogOption( child:Text('Option A'), onPressed:(){ Navigator.pop(context); }, ), SimpleDialogOption( child:Text('Option B'), onPressed:(){ Navigator.pop(context); }, ), SimpleDialogOption( child:Text('Option C'), onPressed:(){ Navigator.pop(context); }, ), ], ); } ); }

3 SimpleDialog：获取与使用选项的值

import 'package:flutter/material.dart'; import 'dart:async'; enum Option{ A,B,C } class SimpleDialogDemo extends StatefulWidget { SimpleDialogDemo({Key key}) : super(key: key); @override _SimpleDialogDemoState createState() => _SimpleDialogDemoState(); } class _SimpleDialogDemoState extends State<SimpleDialogDemo> { String _choice='Nothing'; Future _openSimpleDialog() async{ final option=await showDialog( context:context, builder: (BuildContext context){ return SimpleDialog( title: Text('SimpleDialog'), children: [ SimpleDialogOption( child:Text('Option A'), onPressed:(){ Navigator.pop(context,Option.A); }, ), SimpleDialogOption( child:Text('Option B'), onPressed:(){ Navigator.pop(context,Option.B); }, ), SimpleDialogOption( child:Text('Option C'), onPressed:(){ Navigator.pop(context,Option.C); }, ), ], ); } ); switch (option){ case Option.A: setState(() { _choice='A'; }); break; case Option.B: setState(() { _choice='B'; }); break; case Option.C: setState(() { _choice='C'; }); break; } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Dialog'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Your choice is:$_choice'), Row( mainAxisAlignment:MainAxisAlignment.center, children: [ ], ) ], ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.format_list_numbered), onPressed: _openSimpleDialog ), ); } }

5 AlertDialog：提示对话框.mp4和获取与使用动作的值

import 'package:flutter/material.dart'; import 'dart:async'; enum Action { Ok, Cancel } class AlertDialogDemo extends StatefulWidget { @override _AlertDialogDemoState createState() => _AlertDialogDemoState(); } class _AlertDialogDemoState extends State<AlertDialogDemo> { String _choice = 'Nothing'; Future _openAlertDialog() async { final action = await showDialog( context: context, barrierDismissible: false,//如果必须要选择cancel或者OK，就把这一项设置成false，点击其他地方就不会退出提示框 builder: (BuildContext context) { return AlertDialog( title: Text('AlertDialog'), content: Text('Are you sure about this?'), actions: <Widget>[ FlatButton( child: Text('Cancel'), onPressed: () { Navigator.pop(context, Action.Cancel); }, ), FlatButton( child: Text('Ok'), onPressed: () { Navigator.pop(context, Action.Ok); }, ), ], ); }, ); switch (action) { case Action.Ok: setState(() { _choice = 'Ok'; }); break; case Action.Cancel: setState(() { _choice = 'Cancel'; }); break; default: } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('AlertDialogDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Your choice is: $_choice'), SizedBox(height: 16.0,), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('Open AlertDialog'), onPressed: _openAlertDialog, ), ], ), ], ), ), ); } }

6 BottomSheet：底部滑动窗口, BottomSheet：对话框式底部滑动窗口（showModalBottomSheet）

import 'package:flutter/material.dart'; import 'dart:async'; class BottomSheetDemo extends StatefulWidget { @override _BottomSheetDemoState createState() => _BottomSheetDemoState(); } class _BottomSheetDemoState extends State<BottomSheetDemo> { final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>(); _openBottomSheet() { _bottomSheetScaffoldKey .currentState .showBottomSheet((BuildContext context) { return BottomAppBar( child: Container( height: 90.0, width: double.infinity, padding: EdgeInsets.all(16.0), child: Row( children: <Widget>[ Icon(Icons.pause_circle_outline), SizedBox(width: 16.0,), Text('01:30 / 03:30'), Expanded( child: Text('Fix you - Coldplay', textAlign: TextAlign.right,), ), ], ), ), ); }); } Future _openModalBottomSheet() async { final option = await showModalBottomSheet( context: context, builder: (BuildContext context) { return Container( height: 200.0, child: Column( children: <Widget>[ ListTile( title: Text('Option A'), onTap: () { Navigator.pop(context, 'A'); }, ), ListTile( title: Text('Option B'), onTap: () { Navigator.pop(context, 'B'); }, ), ListTile( title: Text('Option C'), onTap: () { Navigator.pop(context, 'C'); }, ), ], ), ); } ); print(option); } @override Widget build(BuildContext context) { return Scaffold( key: _bottomSheetScaffoldKey, appBar: AppBar( title: Text('BottomSheetDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: Text('Open BottomSheet'), onPressed: _openBottomSheet, ), FlatButton( child: Text('Modal BottomSheet'), onPressed: _openModalBottomSheet, ), ] ), ], ), ), ); } }

9 SnackBar：操作提示栏

会短暂的提示，可以提示用户的操作

import 'package:flutter/material.dart'; class SnackBarDemo extends StatefulWidget { @override _SnackBarDemoState createState() => _SnackBarDemoState(); } class _SnackBarDemoState extends State<SnackBarDemo> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('SnackBarDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ SnackBarButton(), ] ), ], ), ), ); } } class SnackBarButton extends StatelessWidget { @override Widget build(BuildContext context) { return FlatButton( child: Text('Open SnackBar'), onPressed: () { Scaffold.of(context).showSnackBar( SnackBar( content: Text('Processing...'), action: SnackBarAction( label: 'OK', onPressed: () {}, ), ) ); }, ); } }

10 ExpansionPanel：收缩面板

import 'package:flutter/material.dart'; class ExpansionPanelItem { final String headerText; final Widget body; bool isExpanded; ExpansionPanelItem({ this.headerText, this.body, this.isExpanded, }); } class ExpansionPanelDemo extends StatefulWidget { @override _ExpansionPanelDemoState createState() => _ExpansionPanelDemoState(); } class _ExpansionPanelDemoState extends State<ExpansionPanelDemo> { List<ExpansionPanelItem> _expansionPanelItems; @override void initState() { super.initState(); _expansionPanelItems = <ExpansionPanelItem>[ ExpansionPanelItem( headerText: 'Panel A', body: Container( padding: EdgeInsets.all(16.0), width: double.infinity, child: Text('Content for Panel A.'), ), isExpanded: false, ), ExpansionPanelItem( headerText: 'Panel B', body: Container( padding: EdgeInsets.all(16.0), width: double.infinity, child: Text('Content for Panel B.'), ), isExpanded: false, ), ExpansionPanelItem( headerText: 'Panel C', body: Container( padding: EdgeInsets.all(16.0), width: double.infinity, child: Text('Content for Panel C.'), ), isExpanded: false, ), ]; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('ExpansionPanelDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ExpansionPanelList( expansionCallback: (int panelIndex, bool isExpanded) { setState(() { _expansionPanelItems[panelIndex].isExpanded = !isExpanded; }); }, children: _expansionPanelItems.map( (ExpansionPanelItem item) { return ExpansionPanel( isExpanded: item.isExpanded, body: item.body, headerBuilder: (BuildContext context, bool isExpanded) { return Container( padding: EdgeInsets.all(16.0), child: Text( item.headerText, style: Theme.of(context).textTheme.title, ), ); }, ); } ).toList(), ), ], ), ), ); } }