如何从颤动的表单中获取值？
Posted
技术标签:
【中文标题】如何从颤动的表单中获取值？【英文标题】：How to fetch values from a form in flutter? 【发布时间】：2021-01-29 15:02:03 【问题描述】：根据图像，我必须根据我的要求从所需字段中获取所有值，即从 TextFormField、CustomRadioButton & 以及 patient age 中获取。单击提交按钮时，我必须获取这些值，以便我可以通过提供者传递它们。
由于我是 Flutter 的新手，我可以从 TextFormField 中获取值，但无法从两者的其余部分中获取值。
下面是我的用户界面。
下面是CustomRadioButton的代码
Container(
width: 200,
child: CustomRadioButton(
customShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
elevation: 0,
absoluteZeroSpacing: false,
unSelectedColor: Theme.of(context).canvasColor,
buttonLables: [
'Male',
'Female',
],
buttonValues: [
"MALE",
"FEMALE",
],
buttonTextStyle: ButtonTextStyle(
textStyle: TextStyle(fontSize: 10)),
radioButtonValue: (value)
print(value);
,
width: 80,
height: 60,
enableShape: true,
selectedBorderColor: Colors.green,
unSelectedBorderColor: Color(0xFFD0D7EB),
selectedColor: Colors.green,
),
),
对于年龄选择器（/不知道我是否正确，因为我刚刚硬编码了文本 12，但希望 + 和 - 应该可以工作。/）
Container(
width: 100.0,
height: 55.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
onTap: () ,
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(7.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Center(
child: Icon(
Icons.remove,
color: Colors.black,
size: 20.0,
),
),
),
),
Text(
'12',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
color: Colors.black),
),
InkWell(
onTap: () ,
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Center(
child: Icon(
Icons.add,
color: Colors.black,
size: 20.0,
),
),
),
)
],
),
)
],
),
SizedBox(height: 80),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 40,
child: RaisedButton(
color: Color(0xFF888DA1),
child: Text('Submit', style: TextStyle(fontFamily: 'Poppins-Regular',
fontSize: 14, color: Colors.white)),
onPressed: ()
submit();
),
),
],
这是我将获取这些值的函数
提交() 异步 打印（名称控制器。文本）；
请帮助我如何做到这一点！
【问题讨论】：
看起来您正在使用静态值Text( '12', 来表示年龄
不，现在我只是对其进行了硬编码，但实际上可以通过点击 + 或 - 来选择年龄。您能否告诉我如何获取这些值以及如何成功操作+ 和-。请帮助我@Shubham Narkhede。
是的，只要一分钟就会给出答案
请检查我的回答，如果这对您有用，请将其标记为真实并进行投票
【参考方案1】：
所以在这里我首先设置defaultSelected: "MALE",，然后将值存储在一个变量中，当你更改值时，你
从radioButtonValue: 这个方法中获取这个值，然后简单地将这个值添加到我的局部变量中。在那之后，我只添加了简单的
increment and decrement 逻辑并将此值设置为文本
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
accentColor: Colors.blue,
),
home: SelectionScreen(),
);
class SelectionScreen extends StatefulWidget
@override
State<StatefulWidget> createState()
// TODO: implement createState
return _selectionScreen();
class _selectionScreen extends State<SelectionScreen>
var gender = "MALE";
int age = 12;
@override
Widget build(BuildContext context)
// TODO: implement build
return Scaffold(
body: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: [
Container(
width: 200,
child: CustomRadioButton(
customShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
elevation: 0,
absoluteZeroSpacing: false,
unSelectedColor: Theme.of(context).canvasColor,
buttonLables: [
'Male',
'Female',
],
buttonValues: [
"MALE",
"FEMALE",
],
buttonTextStyle: ButtonTextStyle(
textStyle: TextStyle(fontSize: 10)),
radioButtonValue: (value)
setState(()
gender = value.toString();
print("=--->>$gender");
);
,
width: 80,
height: 60,
enableShape: true,
selectedBorderColor: Colors.green,
unSelectedBorderColor: Color(0xFFD0D7EB),
selectedColor: Colors.green,
defaultSelected: "MALE",
),
),
Container(
width: 100.0,
height: 55.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
onTap: ()
setState(()
age--;
);
,
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(7.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Center(
child: Icon(
Icons.remove,
color: Colors.black,
size: 20.0,
),
),
),
),
Text(
age.toString(),
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
color: Colors.black),
),
InkWell(
onTap: ()
setState(()
age++;
);
,
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
border: Border.all(
color: Color(0xFFD0D7EB),
)
),
child: Center(
child: Icon(
Icons.add,
color: Colors.black,
size: 20.0,
),
),
),
)
],
),
),
SizedBox(height: 80),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 40,
child: RaisedButton(
color: Color(0xFF888DA1),
child: Text('Submit', style: TextStyle(fontFamily: 'Poppins-Regular',
fontSize: 14, color: Colors.white)),
onPressed: ()
print("============>> Radio Button Value: $gender");
print("============>> Age: $age");
),
),
],),
],
),),
);
【讨论】：
是的，一切正常。但在 UI 上，它没有显示值减少或增加，这意味着它只显示 12。 如果年龄限制到 14 岁怎么办？ 我已经检查了一切正常。现在你的意思是说你想为年龄添加验证，比如 max age 是 14 对吗？ 是的，在 UI 上它只显示 12。问题是当我们点击+ 或 - 时，值应该被更改。但它只显示了 12 个，当我热重载它时，它只是在改变。
@abhipsabiswal 我更新了我的答案，您可以在上面的示例中运行，当您单击 + 和 - 按钮时，它的变化值工作正常【参考方案2】：
最直接的方法是构建一个模型类，该类将具有每个表单元素的默认值。然后，在构建表单时，构造表单数据类的实例，并使用成员为每个项目建立value:。连接每个onChanged: 回调以验证新值，并将其存储回表单数据实例。提交时，顺其自然地发送数据。
【讨论】：
非常感谢！ @Randal Schwartz。以上是关于如何从颤动的表单中获取值？的主要内容，如果未能解决你的问题，请参考以下文章