如何从一个类屏幕获取值到另一个类并在颤动中填充这些值? [英] How to get values from one class screen to another class and populate those values in flutter?
本文介绍了如何从一个类屏幕获取值到另一个类并在颤动中填充这些值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个主类和 TimePickerScreen 类，我试图将值从 TimePickerScreen 类获取到 Main 类 以填充这些值，我用 GestureDetector 包裹 From 和 To 文本以在 bottomSheet 中调用 TimePickerScreen 类，然后选择时间并点击保存按钮值应该代替 select Time 填充，但我不知道如何获取这些值，下面我粘贴了我的代码和屏幕截图，谁能帮助我，提前致谢.主类
import 'package:flutter/material.dart';导入包:single_selection_horizontal/timedatepicker_screen.dart"；无效的主要()=>运行应用程序(我的应用程序())；MyApp 类扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回材料应用程序(标题:自定义时间选择器水平"，主页:选择时间日期()，);}}类 SelectTimeDate 扩展 StatefulWidget {@覆盖_SelectTimeDateState createState() =>_SelectTimeDateState();}类 _SelectTimeDateState 扩展状态;{字符串 pfromTime ='';字符串 ptoTime ='';//字符串 fromDate='';//String toDate='';@覆盖小部件构建(BuildContext 上下文){返回脚手架(应用栏:应用栏(title: Text('自定义时间选择器水平'),),身体:中心(孩子:容器(孩子:列(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,孩子们: [手势检测器(onTap:pickerBottomSheet，孩子:容器(孩子:列(孩子们: [Text("来自",style: TextStyle(fontSize: 20,color: Colors.black),),文本(pfromTime==''?选择时间": "$pfromTime",style: TextStyle(fontSize: 15,color: Colors.grey),),],),),),大小框(高度:10，)，手势检测器(onTap:pickerBottomSheet，孩子:容器(孩子:列(孩子们: [Text("To",style:TextStyle(fontSize:20,color:Colors.black),),文本(ptoTime==''?选择时间": "$ptoTime",style: TextStyle(fontSize: 15,color: Colors.grey),),],),),),],),),),);}选择器底部表(){showModalBottomSheet(上下文:上下文，isScrollControlled:真，isDismissible:真，构建器:(BuildContext 上下文){返回 TimePickerScreen();});}} TimePickerScreen
import 'package:flutter/material.dart';类 TimePickerScreen 扩展 StatefulWidget {@覆盖_TimePickerScreenState createState() =>_TimePickerScreenState();}类 _TimePickerScreenState 扩展了状态<TimePickerScreen>{String selectedFromTime = "";列表<字符串>fromTimeList = [0:00"、0:30"、1:00"、1:30"、2:00"、2:30"、3:00";、3:30"、4:00"、4:30"、5:00"、5:30"、6:00"、6:30"];列表<布尔>fromTimeListSelect = [假,假,假,假,假,假,假,假,假,假,假,假,假,假,];字符串 selectedToTime ="";列表<字符串>toTimeList = [0:00"、0:30"、1:00"、1:30"、2:00"、2:30"、3:00";、3:30"、4:00"、4:30"、5:00"、5:30"、6:00"、6:30"];列表<布尔>toTimeListSelect = [假,假,假,假,假,假,假,假,假,假,假,假,假,假,];@覆盖小部件构建(BuildContext 上下文){返回容器(高度:MediaQuery.of(context).size.height * 0.80,装饰:盒子装饰(边界半径:边界半径.only(左上角:半径.圆形(10)，右上角:半径.圆形(10)，)),孩子:列(mainAxisAlignment: MainAxisAlignment.center,孩子们: [容器(填充:EdgeInsets.fromLTRB(50, 50, 50, 50),child: Text("Time Picker",style: TextStyle(fontSize: 40,color: Colors.purple),)),分频器()，Text("Select From Time",style: TextStyle(fontSize: 20,color: Colors.purple),),从时间()，分频器()，Text("Select To Time",style: TextStyle(fontSize: 20,color: Colors.purple),),到时间()，FlatButton(onPressed: (){},颜色:颜色.紫色，填充:EdgeInsets.fromLTRB(15, 15, 15, 15),孩子:文本(保存"，样式:TextStyle(字体大小:20，颜色:Colors.white)，))，大小盒(高度:100，)，Text('From : $selectedFromTime To : $selectedToTime'),],),);}小部件 fromTime(){返回扩展(孩子:ListView.builder(收缩包装:是的，滚动方向:Axis.horizontal，itemCount: fromTimeList.length,itemBuilder: (BuildContext context,int index){返回手势检测器(孩子:容器(填充:EdgeInsets.all(6)，孩子:中心(孩子:文本(fromTimeList [索引]，样式:TextStyle(颜色:fromTimeListSelect[index]?Colors.white:Colors.black，fontSize:16)，))，装饰:盒子装饰(形状:BoxShape.circle，颜色:fromTimeListSelect[索引]?Colors.purple :Colors.white，),),点按:(){设置状态((){for(int i=0; i 解决方案
在类级别添加回调方法TimePickerScreen like
最终函数回调；并在保存按钮上使用它
onPressed: () {widget.callback(selectedFromTime, selectedToTime);//这里Navigator.of(context).pop();},并使用 TimePickerScreen 之类的
return TimePickerScreen(回调:(字符串从，字符串到){print("从 $from TO $to");设置状态((){pfromTime = 从；ptoTime = to;});},);<块引用>
制作可空字符串将是更好的选择，因为它取决于用户.
完整代码
import 'package:flutter/material.dart';无效的主要()=>runApp(const MyApp());MyApp 类扩展 StatelessWidget {const MyApp({Key?key}) : super(key: key);@覆盖小部件构建(BuildContext 上下文){返回材料应用程序(标题:自定义时间选择器水平"，主页:选择时间日期()，);}}类 SelectTimeDate 扩展 StatefulWidget {@覆盖_SelectTimeDateState createState() =>_SelectTimeDateState();}类 _SelectTimeDateState 扩展状态;{字符串 pfromTime = '';字符串 ptoTime = '';//字符串 fromDate='';//String toDate='';@覆盖小部件构建(BuildContext 上下文){返回脚手架(应用栏:应用栏(title: const Text('自定义时间选择器水平'),),身体:中心(孩子:容器(孩子:列(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,孩子们: [手势检测器(onTap:pickerBottomSheet，孩子:容器(孩子:列(孩子们: [文本("从，样式:TextStyle(字体大小:20，颜色:Colors.black)，),文本(pfromTime == '' ?选择时间":pfrom时间，样式:TextStyle(字体大小:15，颜色:Colors.grey)，),],),),),大小盒(高度:10，),手势检测器(onTap:pickerBottomSheet，孩子:容器(孩子:列(孩子们: [文本("为，样式:TextStyle(字体大小:20，颜色:Colors.black)，),文本(ptoTime == '' ?选择时间": 时间,样式:TextStyle(字体大小:15，颜色:Colors.grey)，),],),),),],),),),);}选择器底部表(){showModalBottomSheet(上下文:上下文，isScrollControlled:真，isDismissible:真，构建器:(BuildContext 上下文){返回时间选择器屏幕(回调:(字符串从，字符串到){print("从 $from TO $to");},);});}}类 TimePickerScreen 扩展 StatefulWidget {最终函数回调；const TimePickerScreen({Key? key, required this.callback}) : super(key: key);@覆盖_TimePickerScreenState createState() =>_TimePickerScreenState();}类 _TimePickerScreenState 扩展了状态<TimePickerScreen>{String selectedFromTime = "";列表<字符串>从时间列表 = [0:00",0:30",1:00",1:30"，2:00",2:30"，3:00",3:30"，4:00"，4:30"，5:00"，5:30"，6:00",6:30"];列表<布尔>从时间列表选择 = [错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，];字符串 selectedToTime = "";列表<字符串>到时间列表 = [0:00",0:30",1:00",1:30"，2:00",2:30"，3:00",3:30"，4:00"，4:30"，5:00"，5:30"，6:00",6:30"];列表<布尔>toTimeListSelect = [错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，错误的，];@覆盖小部件构建(BuildContext 上下文){返回容器(高度:MediaQuery.of(context).size.height * 0.80,装饰:const BoxDecoration(边界半径:边界半径.only(左上角:半径.圆形(10)，右上角:半径.圆形(10)，)),孩子:列(mainAxisAlignment: MainAxisAlignment.center,孩子们: [容器(填充:EdgeInsets.fromLTRB(50, 50, 50, 50),孩子:文本(时间选择器"，样式:TextStyle(字体大小:40，颜色:Colors.purple)，)),分频器()，文本(从时间选择"，样式:TextStyle(字体大小:20，颜色:Colors.purple)，),从时间()，分频器()，文本(选择时间"，样式:TextStyle(字体大小:20，颜色:Colors.purple)，),到时间()，扁平按钮(按下:(){widget.callback(selectedFromTime, selectedToTime);//这里Navigator.of(context).pop();},颜色:颜色.紫色，填充:EdgeInsets.fromLTRB(15, 15, 15, 15),孩子:文本(保存"，样式:TextStyle(字体大小:20，颜色:Colors.white)，)),大小盒(身高:100，),Text('From : $selectedFromTime To : $selectedToTime'),],),);}小部件 fromTime() {返回扩展(孩子:ListView.builder(收缩包装:是的，滚动方向:Axis.horizontal，itemCount: fromTimeList.length,itemBuilder: (BuildContext context, int index) {返回手势检测器(孩子:容器(填充:EdgeInsets.all(6)，孩子:中心(孩子:文本(fromTimeList[索引],样式:文本样式(颜色:fromTimeListSelect[索引] ?颜色.白色:颜色.黑色，字体大小:16)，)),装饰:盒子装饰(形状:BoxShape.circle，颜色:fromTimeListSelect[索引]?Colors.purple :Colors.white，),),点按:(){设置状态((){for (int i = 0; i < fromTimeListSelect.length; i++) {从时间列表选择[i] = 假；}fromTimeListSelect[index] = !fromTimeListSelect[index];fromTimeListSelect[索引] == true?selectedFromTime = fromTimeList[索引]: selectedFromTime = ' ';打印(从时间列表选择[索引])；打印(从时间列表 [索引])；});},);},),);}小部件 toTime() {返回扩展(孩子:ListView.builder(收缩包装:是的，滚动方向:Axis.horizontal，itemCount: fromTimeList.length,itemBuilder: (BuildContext context, int index) {返回手势检测器(孩子:容器(填充:EdgeInsets.all(6)，孩子:中心(孩子:文本(toTimeList[索引],样式:文本样式(颜色:toTimeListSelect[索引] ?颜色.白色:颜色.黑色，字体大小:16)，)),装饰:盒子装饰(形状:BoxShape.circle，颜色:toTimeListSelect[索引]?Colors.purple :Colors.white，),),点按:(){设置状态((){for (int i = 0; i < toTimeListSelect.length; i++) {toTimeListSelect[i] = false;}toTimeListSelect[index] = !toTimeListSelect[index];toTimeListSelect[索引] == true?selectedToTime = toTimeList[索引]: selectedToTime = ' ';打印(toTimeListSelect[索引])；打印(到时间列表 [索引])；});},);},),);}} I have one main class and TimePickerScreen class, I am trying to get the values from TimePickerScreen class to Main class to populate those values, I wraped From and To Text with GestureDetector to call TimePickerScreen class within bottomSheet and after selecting time and Tapping Save Button values should populate in place of select Time but I don't know how to get those values and below I pasted my code and screenshots, could anyone please help me, Thanks in Advance. Main Class
import 'package:flutter/material.dart';
import 'package:single_selection_horizontal/timedatepicker_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "custom time picker horizontal",
home: SelectTimeDate(),
);
}
}
class SelectTimeDate extends StatefulWidget {
@override
_SelectTimeDateState createState() => _SelectTimeDateState();
}
class _SelectTimeDateState extends State<SelectTimeDate> {
String pfromTime ='';
String ptoTime ='';
//String fromDate='';
//String toDate='';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('custom time picker horizontal'),
),
body: Center(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: pickerBottomSheet,
child: Container(
child: Column(
children: [
Text(" From ",style: TextStyle(fontSize: 20,color: Colors.black),),
Text(
pfromTime==''
? "Select Time"
: "$pfromTime",style: TextStyle(fontSize: 15,color: Colors.grey),),
],
),
),
),
SizedBox(height: 10,),
GestureDetector(
onTap: pickerBottomSheet,
child: Container(
child: Column(
children: [
Text(" To ",style: TextStyle(fontSize: 20,color: Colors.black),),
Text(
ptoTime==''
? "Select Time"
: "$ptoTime",style: TextStyle(fontSize: 15,color: Colors.grey),),
],
),
),
),
],
),
),
),
);
}
pickerBottomSheet(){
showModalBottomSheet(
context: context,
isScrollControlled: true,
isDismissible: true,
builder: (BuildContext context){
return TimePickerScreen();
}
);
}
}
TimePickerScreen
import 'package:flutter/material.dart';
class TimePickerScreen extends StatefulWidget {
@override
_TimePickerScreenState createState() => _TimePickerScreenState();
}
class _TimePickerScreenState extends State<TimePickerScreen> {
String selectedFromTime = " ";
List<String> fromTimeList = ["0:00", "0:30", "1:00", "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30"];
List<bool> fromTimeListSelect =[false,false,false,false,false,false,false,false,false,false,false,false,false,false,];
String selectedToTime =" ";
List<String> toTimeList = ["0:00", "0:30", "1:00", "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30"];
List<bool> toTimeListSelect =[false,false,false,false,false,false,false,false,false,false,false,false,false,false,];
@override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.80,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.fromLTRB(50, 50, 50, 50),
child: Text("Time Picker",style: TextStyle(fontSize: 40,color: Colors.purple),)),
Divider(),
Text("Select From Time",style: TextStyle(fontSize: 20,color: Colors.purple),),
fromTime(),
Divider(),
Text("Select To Time",style: TextStyle(fontSize: 20,color: Colors.purple),),
toTime(),
FlatButton(onPressed: (){
},
color: Colors.purple,
padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
child: Text("Save",style: TextStyle(fontSize: 20,color: Colors.white),)),
SizedBox(height: 100,),
Text('From : $selectedFromTime To : $selectedToTime'),
],
),
);
}
Widget fromTime(){
return Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: fromTimeList.length,
itemBuilder: (BuildContext context,int index){
return GestureDetector(
child: Container(
padding: EdgeInsets.all(6),
child: Center(
child: Text(fromTimeList[index],
style: TextStyle(color: fromTimeListSelect[index] ? Colors.white : Colors.black ,fontSize: 16),)),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: fromTimeListSelect[index] ? Colors.purple : Colors.white,
),
),
onTap: (){
setState(() {
for(int i=0; i< fromTimeListSelect.length; i++){
fromTimeListSelect[i] = false;
}
fromTimeListSelect[index] = !fromTimeListSelect[index];
fromTimeListSelect[index] == true ? selectedFromTime =fromTimeList[index] : selectedFromTime= ' ';
print(fromTimeListSelect[index]);
print(fromTimeList[index]);
});
},
);
},),
);
}
Widget toTime(){
return Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: fromTimeList.length,
itemBuilder: (BuildContext context,int index){
return GestureDetector(
child: Container(
padding: EdgeInsets.all(6),
child: Center(
child: Text(toTimeList[index],
style: TextStyle(color: toTimeListSelect[index] ? Colors.white : Colors.black ,fontSize: 16),)),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: toTimeListSelect[index] ? Colors.purple : Colors.white,
),
),
onTap: (){
setState(() {
for(int i=0; i< toTimeListSelect.length;i++) {
toTimeListSelect[i] = false;
}
toTimeListSelect[index] = !toTimeListSelect[index];
toTimeListSelect[index] == true ? selectedToTime =toTimeList[index] : selectedToTime= ' ';
print(toTimeListSelect[index]);
print(toTimeList[index]);
});
},
);
},),
);
}
}
解决方案
Add a callback method TimePickerScreen on class level like
final Function callback;
and use it on Save button like
onPressed: () {
widget.callback(selectedFromTime, selectedToTime); //here
Navigator.of(context).pop();
},
And use TimePickerScreen like
return TimePickerScreen(
callback: (String from, String to) {
print("From $from TO $to");
setState(() {
pfromTime = from;
ptoTime = to;
});
},
);
making nullable String will be better choice in this, becasue its depend on user.
Full code
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "custom time picker horizontal",
home: SelectTimeDate(),
);
}
}
class SelectTimeDate extends StatefulWidget {
@override
_SelectTimeDateState createState() => _SelectTimeDateState();
}
class _SelectTimeDateState extends State<SelectTimeDate> {
String pfromTime = '';
String ptoTime = '';
//String fromDate='';
//String toDate='';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('custom time picker horizontal'),
),
body: Center(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: pickerBottomSheet,
child: Container(
child: Column(
children: [
Text(
" From ",
style: TextStyle(fontSize: 20, color: Colors.black),
),
Text(
pfromTime == '' ? "Select Time" : pfromTime,
style: TextStyle(fontSize: 15, color: Colors.grey),
),
],
),
),
),
SizedBox(
height: 10,
),
GestureDetector(
onTap: pickerBottomSheet,
child: Container(
child: Column(
children: [
Text(
" To ",
style: TextStyle(fontSize: 20, color: Colors.black),
),
Text(
ptoTime == '' ? "Select Time" : ptoTime,
style: TextStyle(fontSize: 15, color: Colors.grey),
),
],
),
),
),
],
),
),
),
);
}
pickerBottomSheet() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
isDismissible: true,
builder: (BuildContext context) {
return TimePickerScreen(
callback: (String from, String to) {
print("From $from TO $to");
},
);
});
}
}
class TimePickerScreen extends StatefulWidget {
final Function callback;
const TimePickerScreen({Key? key, required this.callback}) : super(key: key);
@override
_TimePickerScreenState createState() => _TimePickerScreenState();
}
class _TimePickerScreenState extends State<TimePickerScreen> {
String selectedFromTime = " ";
List<String> fromTimeList = [
"0:00",
"0:30",
"1:00",
"1:30",
"2:00",
"2:30",
"3:00",
"3:30",
"4:00",
"4:30",
"5:00",
"5:30",
"6:00",
"6:30"
];
List<bool> fromTimeListSelect = [
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
];
String selectedToTime = " ";
List<String> toTimeList = [
"0:00",
"0:30",
"1:00",
"1:30",
"2:00",
"2:30",
"3:00",
"3:30",
"4:00",
"4:30",
"5:00",
"5:30",
"6:00",
"6:30"
];
List<bool> toTimeListSelect = [
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
];
@override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.80,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.fromLTRB(50, 50, 50, 50),
child: Text(
"Time Picker",
style: TextStyle(fontSize: 40, color: Colors.purple),
)),
Divider(),
Text(
"Select From Time",
style: TextStyle(fontSize: 20, color: Colors.purple),
),
fromTime(),
Divider(),
Text(
"Select To Time",
style: TextStyle(fontSize: 20, color: Colors.purple),
),
toTime(),
FlatButton(
onPressed: () {
widget.callback(selectedFromTime, selectedToTime); //here
Navigator.of(context).pop();
},
color: Colors.purple,
padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
child: Text(
"Save",
style: TextStyle(fontSize: 20, color: Colors.white),
)),
SizedBox(
height: 100,
),
Text('From : $selectedFromTime To : $selectedToTime'),
],
),
);
}
Widget fromTime() {
return Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: fromTimeList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Container(
padding: EdgeInsets.all(6),
child: Center(
child: Text(
fromTimeList[index],
style: TextStyle(
color:
fromTimeListSelect[index] ? Colors.white : Colors.black,
fontSize: 16),
)),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: fromTimeListSelect[index] ? Colors.purple : Colors.white,
),
),
onTap: () {
setState(() {
for (int i = 0; i < fromTimeListSelect.length; i++) {
fromTimeListSelect[i] = false;
}
fromTimeListSelect[index] = !fromTimeListSelect[index];
fromTimeListSelect[index] == true
? selectedFromTime = fromTimeList[index]
: selectedFromTime = ' ';
print(fromTimeListSelect[index]);
print(fromTimeList[index]);
});
},
);
},
),
);
}
Widget toTime() {
return Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: fromTimeList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Container(
padding: EdgeInsets.all(6),
child: Center(
child: Text(
toTimeList[index],
style: TextStyle(
color:
toTimeListSelect[index] ? Colors.white : Colors.black,
fontSize: 16),
)),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: toTimeListSelect[index] ? Colors.purple : Colors.white,
),
),
onTap: () {
setState(() {
for (int i = 0; i < toTimeListSelect.length; i++) {
toTimeListSelect[i] = false;
}
toTimeListSelect[index] = !toTimeListSelect[index];
toTimeListSelect[index] == true
? selectedToTime = toTimeList[index]
: selectedToTime = ' ';
print(toTimeListSelect[index]);
print(toTimeList[index]);
});
},
);
},
),
);
}
}
这篇关于如何从一个类屏幕获取值到另一个类并在颤动中填充这些值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
