这是我在StackOverFlow上提出的第一个问题,因此我将尽我所能尽可能地简洁明了。
我正在尝试验证DateTimePicker
中的一个字段,以将按钮的颜色实质上更改为红色,并且如果未选择提交按钮时选择的时间,则会向用户显示错误点击。我遇到的唯一解决方案与TextFormField
验证和输入验证有关。由于DateTimePicker
产生的输出不是TextFormField
,而且我无法使用验证器功能,因此我试图提出一种解决方案,使我仍然可以验证单击提交按钮后startTime
个选择。
我想到的一种解决方案是将_buildStartEndButtons
函数包装在if语句中,如果startTime
的值为null,则返回红色按钮,如果选择了时间,则返回黑色。但是,这不能解决我仅在单击提交按钮且用户未输入任何内容的情况下向用户显示错误的问题。我当前的解决方案无法带来非常友好的用户体验。我只是很难绕过如何将startTime
属性的状态传递给我的提交按钮的麻烦。
菜单模型小部件:
class MenuModel {
String startTime;
String endTime;
}
小时小工具:
class DateTimePicker extends StatelessWidget {
MenuModel menu;
Function updateStartTime;
Function updateEndTime;
DateTimePicker(
this.menu,
this.updateStartTime,
this.updateEndTime,
);
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
child: Text(
'What are the hours?',
style: TextStyle(fontSize: 18),
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
child: Column(
children: <Widget>[
_buildTimeRange(
starts: this.menu.startTime, ends: this.menu.endTime),
_buildStartEndButtons(context),
],
),
),
],
);
Container _buildStartEndButtons(BuildContext context) {
String errorMsg = 'Please select a time';
if (this.menu.startTime == null) {
return Container(
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
color: Colors.red,
onPressed: () {
DatePicker.showTimePicker(context,
theme: DatePickerTheme(containerHeight: 200.0),
showTitleActions: true, onConfirm: (time) {
print('confirm $time');
this.updateStartTime('${time.hour} : ${time.minute}');
}, currentTime: DateTime.now(), locale: LocaleType.en);
},
child: Text(
'Starts',
style: TextStyle(color: Colors.white),
),
),
),
} else {
return Container(
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
color: Colors.black,
onPressed: () {
DatePicker.showTimePicker(context,
theme: DatePickerTheme(containerHeight: 200.0),
showTitleActions: true, onConfirm: (time) {
print('confirm $time');
this.updateStartTime('${time.hour} : ${time.minute}');
}, currentTime: DateTime.now(), locale: LocaleType.en);
},
child: Text(
'Starts',
style: TextStyle(color: Colors.white),
),
),
),
],
),
);
}
}
Container _buildTimeRange({String starts, String ends}) {
if (starts == null || starts.isEmpty) {
starts = '';
}
if (ends == null || ends.isEmpty) {
ends = '';
}
return Container(
padding: EdgeInsets.symmetric(vertical: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Starts',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
Container(
child: Text(
starts,
style: TextStyle(fontWeight: FontWeight.w500),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Ends',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
Container(
child: Text(
ends,
style: TextStyle(fontWeight: FontWeight.w500),
),
),
],
),
],
),
);
}
}
AddMenuView窗口小部件:
class AddMenuView extends StatefulWidget {
AddMenuView({Key key}) : super(key: key);
_AddMenuViewState createState() => _AddMenuViewState();
}
class _AddMenuViewState extends State<AddMenuView> {
MenuModel menu;
void updateStartTime(String start) {
setState(() {
this.menu.startTime = start;
});
}
return Scaffold(
appBar: AppBar(
title: Text('Restaurant Information'),
),
body: Container(
decoration: BoxDecoration(color: Colors.white54),
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
child: (Column(children: <Widget>[
Container(
child: DateTimePicker(menu, updateStartTime, updateEndTime),
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: color,
),
],
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.all(
Radius.circular(25.0),
),
),
),
FlatButton(
color: Colors.black,
child: Text(
'Submit',
style: TextStyle(color: Colors.white),
),
onPressed: () {
this.menu.startTime.isEmpty ? print('Value needed') : print('Value exists');
},
)
])),
),
);
}
}
侧面注:暂时不考虑endTime
属性。我只是将其分解以提供StackOverFlow上startTime
属性的解决方案,以便我自己解决第二个问题。
谢谢你们花时间帮助我,如果对我要在这里完成的工作尚不完全清楚,请提出,我将竭尽所能进行详细说明!