热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

(十二)Flutter对话框SimpleDialogAlertDialogBottomSheetsnackBarExpansionPanel

修改main.dartimportpackage:fluttermaterial.dart;importpackage:nihao_flutterdemoform_demo.d

修改main.dart 

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/form_demo.dart';
import 'package:nihao_flutter/demo/navigator_demo.dart';
import 'package:nihao_flutter/demo/home_demo.dart';
import 'package:nihao_flutter/demo/simple_dialog_demo.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) { // TODO: implement buildreturn MaterialApp(debugShowCheckedModeBanner: false,// home: NavigatorDemo(),initialRoute: '/dialog',routes: {'/':(context)=>HomeDemo(), '/form':(context)=>FormDemo(), '/dialog':(context)=>SimpleDialogDemo(), },theme: ThemeData(primarySwatch: Colors.yellow,highlightColor: Color.fromRGBO(255, 255, 255, 0.5),splashColor: Colors.red),);}
}

simle_dialog_demo.dart

简单的显示和关闭

import 'package:flutter/material.dart';class SimpleDialogDemo extends StatefulWidget {@override_SimpleDialogDemoState createState() => _SimpleDialogDemoState();
}class _SimpleDialogDemoState extends State {_openSimpleDialog() {showDialog(context: context,builder: (BuildContext context) {return SimpleDialog(title: Text('simpleDialog'),children: [SimpleDialogOption(child: Text('Options A'),onPressed: (){// 关闭对话框Navigator.pop(context);},),SimpleDialogOption(child: Text('Options B'),onPressed: (){// 关闭对话框Navigator.pop(context);},),SimpleDialogOption(child: Text('Options C'),onPressed: (){// 关闭对话框Navigator.pop(context);},),],);});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('SimpleDialogDemo'),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(),),floatingActionButton: FloatingActionButton(child: Icon(Icons.format_list_numbered),onPressed: _openSimpleDialog,),);}
}

获取simpledialog中的数值

import 'package:flutter/material.dart';
import 'dart:async';// 获取选中的数值
enum Option { A, B, C }class SimpleDialogDemo extends StatefulWidget {@override_SimpleDialogDemoState createState() => _SimpleDialogDemoState();
}class _SimpleDialogDemoState extends State {String _chose = "nothing";Future _openSimpleDialog() async {final option = await showDialog(context: context,builder: (BuildContext context) {return SimpleDialog(title: Text('simpleDialog'),children: [SimpleDialogOption(child: Text('Options A'),onPressed: () {// 关闭对话框Navigator.pop(context, Option.A);},),SimpleDialogOption(child: Text('Options B'),onPressed: () {// 关闭对话框Navigator.pop(context, Option.B);},),SimpleDialogOption(child: Text('Options C'),onPressed: () {// 关闭对话框Navigator.pop(context, Option.C);},),],);});switch (option) {case Option.A:setState(() {_chose = "A";});break;case Option.B:setState(() {_chose = "B";});break;case Option.C:setState(() {_chose = "C";});break;default:}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('SimpleDialogDemo'),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('你选择了:$_chose'),Row(mainAxisAlignment: MainAxisAlignment.center,children: [],)],),),floatingActionButton: FloatingActionButton(child: Icon(Icons.format_list_numbered),onPressed: _openSimpleDialog,),);}
}


AlertDialog

import 'package:flutter/material.dart';
import 'dart:async';
class AlertDialogDemo extends StatefulWidget {@override_AlertDialogDemoState createState() => _AlertDialogDemoState();
}class _AlertDialogDemoState extends State {_openAlertDialog(){showDialog(context: context,// 空白地方点击不允许关闭barrierDismissible: false,builder: (BuildContext context){return AlertDialog(title: Text('ALertDialog'),content: Text('Are you sure about this?'),actions: [FlatButton(child: Text('Cancel'),onPressed: (){Navigator.pop(context);},),FlatButton(child: Text('OK'),onPressed: (){Navigator.pop(context);},)],);});}@overrideWidget 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: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [RaisedButton(child: Text('Open AlertDialog'),onPressed: _openAlertDialog,)],)],),),);}
}

获取alert的值

 

import 'package:flutter/material.dart';
import 'dart:async';enum Action {Ok,Cancel,
}class AlertDialogDemo extends StatefulWidget {@override_AlertDialogDemoState createState() => _AlertDialogDemoState();
}class _AlertDialogDemoState extends State {String _choice = 'Nothing';Future _openAlertDialog() async {final action = await showDialog(context: context,// 空白地方点击不允许关闭barrierDismissible: false,builder: (BuildContext context) {return AlertDialog(title: Text('ALertDialog'),content: Text('Are you sure about this?'),actions: [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 = 'Canel';});break;default:}}@overrideWidget 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: [Text('你选择了:$_choice'),SizedBox(height: 16.0,),Row(mainAxisAlignment: MainAxisAlignment.center,children: [RaisedButton(child: Text('Open AlertDialog'),onPressed: _openAlertDialog,)],)],),),);}
}


BottomSheet 底部滑动窗口

import 'package:flutter/material.dart';class BottomSheetDemo extends StatefulWidget {@override_BottomSheetDemoState createState() => _BottomSheetDemoState();
}class _BottomSheetDemoState extends State {final _boottomSheetScaffoldKey = GlobalKey();_openBottomSheet() {_boottomSheetScaffoldKey.currentState.showBottomSheet((BuildContext context) {return BottomAppBar(child: Container(height: 90.0,width: double.infinity,padding: EdgeInsets.all(16.0),child: Row(children: [Icon(Icons.pause_circle_outline,),SizedBox(width: 16.0),Text('01:30 / 03:30'),Expanded(child: Text('Fix you - Coldplay', textAlign: TextAlign.right),)],),),);});}_closeBottomSheet() {Navigator.pop(context);}@overrideWidget build(BuildContext context) {return Scaffold(key: _boottomSheetScaffoldKey,appBar: AppBar(title: Text('BottomSheetDemo'),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [FlatButton(child: Text('Open BottomSheet'),onPressed: _openBottomSheet,),FlatButton(child: Text('Close BottomSheet'),onPressed: _closeBottomSheet,)],)],),),);}
}


BottomSheet 对话框形式底部滑动窗口

这种bottomSheet显示出来以后就不能用别的东西了 一般分享功能都是用的这个

import 'package:flutter/material.dart';class BottomSheetDemo extends StatefulWidget {@override_BottomSheetDemoState createState() => _BottomSheetDemoState();
}class _BottomSheetDemoState extends State {final _boottomSheetScaffoldKey = GlobalKey();_openBottomSheet() {_boottomSheetScaffoldKey.currentState.showBottomSheet((BuildContext context) {return BottomAppBar(child: Container(height: 90.0,width: double.infinity,padding: EdgeInsets.all(16.0),child: Row(children: [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: [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");},),],),);});debugPrint(option);}@overrideWidget build(BuildContext context) {return Scaffold(key: _boottomSheetScaffoldKey,appBar: AppBar(title: Text('BottomSheetDemo'),elevation: 0.0,),body: Container(padding: EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [FlatButton(child: Text('Open BottomSheet'),onPressed: _openBottomSheet,),FlatButton(// 对话框形式底部滑动窗口child: Text('Modal BottomSheet'),onPressed: _openModalBottomSheet,),],)],),),);}
}


SnackBar操作提示栏

import 'package:flutter/material.dart';
class SnackBarDemo extends StatefulWidget {@override_SnackBarDemoState createState() => _SnackBarDemoState();
}class _SnackBarDemoState extends State {@overrideWidget 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: [Row(mainAxisAlignment: MainAxisAlignment.center,children: [SnackBarButton()],)],),),);}
}class SnackBarButton extends StatelessWidget {@overrideWidget build(BuildContext context) {return FlatButton(child: Text('Open SnackBar'),onPressed: (){Scaffold.of(context).showSnackBar(SnackBar(content: Text('Processing....'),action: SnackBarAction(label: 'Ok',onPressed: (){debugPrint('OK');},),));},);}
}


ExpansionPanel面板的收缩

import 'package:flutter/material.dart';
class ExpansionPanelDemo extends StatefulWidget {@override_ExpansionPanelDemoState createState() => _ExpansionPanelDemoState();
}class _ExpansionPanelDemoState extends State {// 面板不会自动收缩的 所以使用这个数值来控制自动收缩bool _isExpanded=false;@overrideWidget 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: [// 点击监听ExpansionPanelList(expansionCallback: (int panelIndex,bool isExpanded){setState(() {_isExpanded=!isExpanded; });},children: [ExpansionPanel(headerBuilder: (BuildContext context,bool isExpanded){return Container(padding: EdgeInsets.all(16.0),child: Text('Panel A',style: Theme.of(context).textTheme.title,),);},body:Container(padding: EdgeInsets.all(16.0),width: double.infinity,child: Text('Content for Panel A'),),// 面板的 默认展开和关闭isExpanded: _isExpanded,)],)],),),);}
}


ExpansionPanel 面板列表项目

import 'package:flutter/material.dart';
class ExpansionPanelItem{final String headerText;final Widget body;bool isExpandede;ExpansionPanelItem({this.headerText,this.body,this.isExpandede,});
}class ExpansionPanelDemo extends StatefulWidget {@override_ExpansionPanelDemoState createState() => _ExpansionPanelDemoState();
}class _ExpansionPanelDemoState extends State {// 面板不会自动收缩的 所以使用这个数值来控制自动收缩List _expansionPanelItems;@overridevoid initState() {super.initState();_expansionPanelItems=[ExpansionPanelItem(headerText: 'Panel A',body: Container(padding: EdgeInsets.all(16.0),width: double.infinity,child: Text('Content for Panel A.'),),isExpandede: false,),ExpansionPanelItem(headerText: 'Panel B',body: Container(padding: EdgeInsets.all(16.0),width: double.infinity,child: Text('Content for Panel B.'),),isExpandede: false,),ExpansionPanelItem(headerText: 'Panel C',body: Container(padding: EdgeInsets.all(16.0),width: double.infinity,child: Text('Content for Panel C.'),),isExpandede: false,),];}@overrideWidget 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: [// 点击监听ExpansionPanelList(expansionCallback: (int panelIndex,bool isExpanded){setState(() {_expansionPanelItems[panelIndex].isExpandede=!isExpanded; });},children:_expansionPanelItems.map((ExpansionPanelItem item){return ExpansionPanel(isExpanded: item.isExpandede,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(),)],),),);}
}

 

main代码

import 'package:flutter/material.dart';
import 'package:flutter_app/home/home.dart';
import 'demo/alert_dialog_demo.dart';
import 'demo/btootem_sheet_demo.dart';
import 'demo/expansion_panel_demo.dart';
import 'demo/form_demo.dart';
import 'demo/navigator_demo.dart';
import 'demo/page_demo.dart';
import 'demo/simple_dialog_demo.dart';
import 'demo/snack_bar_demo.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(debugShowCheckedModeBanner: false,// home: NavigatorDemo(),initialRoute: '/expansion_panel',routes: {'/': (context) => Home(),'/form': (context) => FormDemo(),'/dialog': (context) => SimpleDialogDemo(),'/alert_dialog': (context) => AlertDialogDemo(),'/bottom_sheet': (context) => BottomSheetDemo(),'/snack_bar': (context) => SnackBarDemo(),'/expansion_panel': (context) => ExpansionPanelDemo(),},theme: ThemeData(primarySwatch: Colors.yellow,highlightColor: Color.fromRGBO(255, 255, 255, 0.5),splashColor: Colors.white70),);}
}

 


推荐阅读
author-avatar
俊维肇民74
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有