浅识Flutter 基本组件之showDatePicker方法

浅识Flutter 基本组件之showDatePicker 方法

showDatePicker ()方法用于弹出一个日期选择器对话框，该对话框有系统默认的样式，也可以通过builder属性设置自定义样式,它的常用属性及功能说明如下所示。

属性名	类型	功能说明
context	BuildContext	设置BuildContext
initialDate	DateTime	设置日期选择器打开时默认日期
firstDate	DateTime	设置日期选择器可选择的起始日期
lastDate	DateTime	设置日期选择器可选择的终止日期
local	Locale	设置国际化，默认英文
selectableDayPredicate	bool	设置日期选择器可选的日期
builder	Widget	设置日期选择器主题．标题栏等样式

例如，页面上有一个Text组件和一个RaiseButton组件，当点击RaiseButton组件后,弹出日期选择器，在日期选择器上选择日期后，将日期显示在Text组件上。

showdata(context) {showDatePicker(context: context,initialDate: DateTime.now(),lastDate: DateTime.now(),firstDate: DateTime(1900, 01, 01));}


FloatingActionButton(onPressed: () {showdata(context);},backgroundColor: Colors.white,child: Icon(Icons.watch, color: Colors.grey),)

将选择日期显示出来

String data = DateTime.now().toString().substring(0,10);Future<DateTime?> showData(context)  async{   //  async异步调用的方法 需要等showDatePicker执行完  加上awaitDateTime? d =await showDatePicker(context: context,initialDate: DateTime.now(),lastDate: DateTime.now(),firstDate: DateTime(1900, 01, 01));/*将选择日期显示出来*/setState(() {data= d.toString().substring(0,10);});}

完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class zhucepage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return MyState();}
}class MyState extends State {List flag = [false, false, false];List select = ['皇后', '华妃', '甄嬛'];bool isChecked = false;//定义一个弹出日期选择器的方法showdataString data = DateTime.now().toString().substring(0,10);Future<DateTime?> showData(context)  async{   //  async异步调用的方法 需要等showDatePicker执行完  加上awaitDateTime? d =await showDatePicker(context: context,initialDate: DateTime.now(),lastDate: DateTime.now(),firstDate: DateTime(1900, 01, 01));/*将选择日期显示出来*/setState(() {data= d.toString().substring(0,10);});}// showData(context) {//   var d=showDatePicker(//       context: context,//       initialDate: DateTime.now(),//       lastDate: DateTime.now(),//       firstDate: DateTime(1900, 01, 01));//   /*将选择日期显示出来*/// setState(() {//   data= d.toString().substring(0,10);// });//// }@overrideWidget build(BuildContext context) {Row row = Row(children: <Widget>[Text('选择你的阵营：   '),Text(select[0]),Checkbox(value: flag[0],onChanged: (value) {//setState更新值setState(() {flag[0] = value!;});},),Text(select[1]),Checkbox(value: flag[1],onChanged: (value) {//setState更新值setState(() {flag[1] = value!;});},),Text(select[2]),Checkbox(value: flag[2],onChanged: (value) {//setState更新值setState(() {flag[2] = value!;});},),],);/*创建多个CheckboxListTile*/Column column = Column(children: <Widget>[CheckboxListTile(value: this.isChecked,/*设置主标题组件*/title: Text('全选',style: TextStyle(color: Colors.red),),/*设置副标题组件*/subtitle: Text('全选表示自成一派'),/*设置显示的小组件,与□所在位置相反*/secondary: Icon(Icons.flag),/*调整复选框和图标的位置*/controlAffinity: ListTileControlAffinity.leading,onChanged: (bool? value) {setState(() {isChecked = value!;for (int i = 0; i < flag.length; i++) {flag[i] = isChecked;}});},),CheckboxListTile(title: Text(select[0]),subtitle: Text('堕胎小分队'),secondary: Icon(Icons.info),/*调整复选框和图标的位置*/controlAffinity: ListTileControlAffinity.leading,value: flag[0],onChanged: (value) {setState(() {flag[0] = value;});}),CheckboxListTile(title: Text(select[1]),subtitle: Text('世兰好苦队'),secondary: Icon(Icons.info),/*调整复选框和图标的位置*/controlAffinity: ListTileControlAffinity.leading,value: flag[1],onChanged: (value) {setState(() {flag[1] = value;});}),CheckboxListTile(title: Text(select[2]),subtitle: Text('莞莞类卿队'),secondary: Icon(Icons.info),/*调整复选框和图标的位置*/controlAffinity: ListTileControlAffinity.leading,value: flag[2],onChanged: (value) {setState(() {flag[2] = value;});}),// Row(children: <Widget>[//   Text("选择进宫的日子:  "),//   Text(data),// ]),/*点击一个按钮，弹出日期选择对话框*/Row(children: <Widget>[Text("选择进宫的日子:  "),Text(data+'                             '),FloatingActionButton(onPressed: () {showData(context);},backgroundColor: Colors.white,child: Icon(Icons.watch, color: Colors.grey ),),]),],);return Scaffold(appBar: AppBar(title: Text('用户注册'),centerTitle: true,),body: column,floatingActionButton: FloatingActionButton(onPressed: () {String info = "你选择的阵营是：";for (int i = 0; i < flag.length; i++) {if (flag[i]) {/*如果选项被选中*/info = info + select[i] + ' ';}}print(info);},tooltip: 'Increment',child: Icon(Icons.save),),floatingActionButtonLocation:FloatingActionButtonLocation.centerFloat, //浮标的位置);}
}

浅识Flutter 基本组件之showDatePicker方法相关推荐

浅识Flutter 基本组件之TextField组件输入框decoration属性
浅识Flutter 基本组件之TextField组件输入框decoration属性 decoration InputDecoration控制输人框提示信息样式的常用属性 InputDecoratio ...
浅识Flutter 基本组件Scaffold
浅识Flutter 基本组件Scaffold 1. body 2. backgroundColor 3. appBar Scaffold是Flutter开发中实现Material Design布局结构 ...
浅识Flutter 基本组件MaterialAPP的theme属性 app主题
浅识Flutter 基本组件MaterialAPP的theme属性 app主题 ThemeData属性及描述设置主题 theme属性用于指定应用程序的主题(即共享颜色和字体样式). 例如,需要将应用 ...
浅识Flutter 基本组件Scaffold的 drawer属性 app创建头像
浅识Flutter 基本组件Scaffold的 drawer属性 app创建头像在项目开发中使用本地图片资源文件的步骤. 1.在项目下创建一个文件夹image 2.将本地图片放入images文件夹里 ...
浅识Flutter Android studio 设置APP启动页
Flutter Android studio 设置APP名启动页 Android设置APP启动页 ios设置APP启动页 APP的应用一打开,启动应用程序后,进入主功能界面前会有一张图片或一段动画效果 ...
flutter 父组件调用子组件方法
子组件子组件定义 GlobalKey<_ListRefreshRequestNewsState> globalKey = GlobalKey();, 定义方法 void getRefre ...
一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
Flutter 日历组件如何支持中文（国际化）
Flutter 日历组件如何支持中文(国际化) 在 App 开发中,我们通常需要用到国际化的支持. Flutter 在默认情况下就是支持国际化,但是在没有进行特别的设置之前,它们无论在什么环境都是以英 ...
Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 子组件child.vue <template> ...
php自定义控件,小程序自定义组件的实现方法（代码）
本篇文章给大家带来的内容是关于小程序自定义组件的实现方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. File:threecolgrid.js// components/t ...

浅识Flutter 基本组件之showDatePicker方法

浅识Flutter 基本组件之showDatePicker 方法

浅识Flutter 基本组件之showDatePicker方法相关推荐

最新文章

热门文章