英文:
Content change on selecting DropdownButtonFormField
问题
您可以使用一个Map来跟踪每个选项的状态，以确定哪些TextFormField应该显示。在onChanged回调中更新该Map，然后使用Visibility小部件根据选项的状态来显示或隐藏相应的TextFormField。以下是一个示例代码片段：
Map<String, bool> itemVisibility = {
'A': false,
'B': false,
'C': false,
'D': false,
};
// ...
DropdownButtonFormField(
decoration: InputDecoration(
labelText: 'Calculate',
),
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue!;
});
// 更新TextFormField的可见性
itemVisibility.keys.forEach((key) {
itemVisibility[key] = key == newValue;
});
},
items: dropdownItems,
),
// ...
inputForm(
title: locale.translate('AreaGeo')!,
controller: _controller1,
suffix: locale.translate('AreaSuffix')!,
isVisible: itemVisibility['A'] ?? false,
),
inputForm(
title: locale.translate('RadiusGeo')!,
controller: _controller2,
suffix: locale.translate('RadiusSuffix')!,
isVisible: itemVisibility['A'] ?? false, // 仅在选择'A'时显示
),
// 重复上述模式以显示其他项目的TextFormField
这样，当用户选择不同的项目时，相应的TextFormField将会显示或隐藏，从而实现您的需求。
英文:
I have a container with DropdownButtonFormField containing 4 items and 4 TextFormField. I want to to show one or more TextFormField per each item inside DropdownButtonFormField. e.g. when user select item (A) only textfield of item (A) is shown for the user to input values or when item(B) is selected then both or all textfields are shown.
How can i acheive this. Below is some part of the code.
return SingleChildScrollView(
child: Container(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Column(
children: [
DropdownButtonFormField(
decoration: InputDecoration(
labelText: 'Calculate',
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue!;
});
},
items: dropdownItems,
),
SizedBox(height: 20),
inputForm(
title: locale.translate('AreaGeo')!,
controller: _controller1,
suffix: locale.translate('AreaSuffix')!,
),
inputForm(
title: locale.translate('RadiusGeo')!,
controller: _controller2,
suffix: locale.translate('RadiusSuffix')!,
),
GestureDetector(
onTap: () {
loanCalculation();
Future.delayed(Duration.zero);
showModalBottomSheet(
isScrollControlled: true,
isDismissible: false,
shape: RoundedRectangleBorder(
borderRadius: BorderRadiusDirectional.only(
topEnd: Radius.circular(18),
topStart: Radius.circular(18),
),
),
context: context,
builder: (context) => SingleChildScrollView(
child: Wrap(
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20),
Center(
child: Container(
width: 80,
height: 5,
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius:
BorderRadius.circular(15),
),
),
),
SizedBox(height: 15),
Padding(
padding: const EdgeInsets.fromLTRB(
20, 10, 0, 10),
child: Column(
children: [
result(
title: locale
.translate('AreaGeo')!,
amount: area),
result(
title: locale
.translate('RadiusGeo')!,
amount: radiusC),
result(
title:
locale.translate('DiameterGeo')!,
amount: diameter),
result(
title:
locale.translate('CircumferenceGeo')!,
amount: circumference),
],
),
),
SizedBox(height: 15),
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Padding(
padding: const EdgeInsets.fromLTRB(
30, 10, 30, 30),
child: Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: UnitConverterApp.isDarkMode
? AppColors.accentDarkColor
: AppColors.accentLightColor,
borderRadius:
BorderRadius.circular(10),
),
child: Center(
child: Text(
locale.translate('ReCalculate')!,
style: style,
)),
),
),
),
],
),
),
],
),
),
);
},
child: Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
color: UnitConverterApp.isDarkMode
? AppColors.accentDarkColor
: AppColors.accentLightColor,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
locale.translate('Calculate')!,
style: style,
)),
),
),
],
),
),
],
),
),
);
What is the recommended way to do this? What should i write inside onchanged:
答案1
得分: 0
以下是代码的翻译部分：
我已经自己解决了，以下是完整的代码列表，如果将来有人有相同的问题。
这是`DropDownButtonFormField`
DropdownButtonFormField(
decoration: InputDecoration(
labelText: 'Calculate',
labelStyle: TextStyle(
fontSize: 20,
color: UnitConverterApp.isDarkMode
? AppColors.accentDarkColor
: AppColors.accentLightColor,
),
border: const OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: UnitConverterApp.isDarkMode
? Colors.white30
: Colors.black26),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: UnitConverterApp.isDarkMode
? AppColors.accentDarkColor
: AppColors.accentLightColor,
width: 2,
),
),
),
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue!;
});
},
items: dropdownItems,
)
项目列表
List<DropdownMenuItem<String>> get dropdownItems {
List<DropdownMenuItem<String>> menuItems = [
DropdownMenuItem(child: Text("Area"), value: "1"),
DropdownMenuItem(child: Text("Radius"), value: "2"),
DropdownMenuItem(child: Text("Diameter"), value: "3"),
DropdownMenuItem(child: Text("Circumference"), value: "4"),
];
return menuItems;
}
textWidget函数
textWidget() {
final AppLocalizations locale = AppLocalizations.of(context)!;
if (selectedValue == "1") {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
locale.translate('RadiusConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('RadiusGeo')!,
controller: _controller2,
suffix: locale.translate('RadiusSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('DiameterConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('DiameterGeo')!,
controller: _controller3,
suffix: locale.translate('DiameterSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('CircumferenceConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('CircumferenceGeo')!,
controller: _controller4,
suffix: locale.translate('CircumferenceSuffix')!,
),
],
);
} else if (selectedValue == "2") {
// ...
} else if (selectedValue == "3") {
// ...
} else if (selectedValue == "4") {
// ...
} else {
return Text('No Selection');
}
}
请注意，这只是代码的翻译部分，不包括任何问题的回答。
英文:
I have solved on my own, here is the full list of code if anyone has the same question in future.
Here is the DropDownButtonFormField
DropdownButtonFormField(
decoration: InputDecoration(
labelText: 'Calculate',
labelStyle: TextStyle(
fontSize: 20,
color: UnitConverterApp.isDarkMode
? AppColors.accentDarkColor
: AppColors.accentLightColor,
),
border: const OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: UnitConverterApp.isDarkMode
? Colors.white30
: Colors.black26),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: UnitConverterApp.isDarkMode
? AppColors.accentDarkColor
: AppColors.accentLightColor,
width: 2,
),
),
),
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue!;
});
},
items: dropdownItems,
),
Items List
List<DropdownMenuItem<String>> get dropdownItems {
List<DropdownMenuItem<String>> menuItems = [
DropdownMenuItem(child: Text("Area"), value: "1"),
DropdownMenuItem(child: Text("Radius"), value: "2"),
DropdownMenuItem(child: Text("Diameter"), value: "3"),
DropdownMenuItem(child: Text("Circumference"), value: "4"),
];
return menuItems;}
textWidget function
textWidget() {
final AppLocalizations locale = AppLocalizations.of(context)!;
if (selectedValue == "1") {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
locale.translate('RadiusConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('RadiusGeo')!,
controller: _controller2,
suffix: locale.translate('RadiusSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('DiameterConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('DiameterGeo')!,
controller: _controller3,
suffix: locale.translate('DiameterSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('CircumferenceConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('CircumferenceGeo')!,
controller: _controller4,
suffix: locale.translate('CircumferenceSuffix')!,
),
],
);
} else if (selectedValue == "2") {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
locale.translate('AreaConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('AreaGeo')!,
controller: _controller1,
suffix: locale.translate('AreaSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('DiameterConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('DiameterGeo')!,
controller: _controller3,
suffix: locale.translate('DiameterSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('CircumferenceConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('CircumferenceGeo')!,
controller: _controller4,
suffix: locale.translate('CircumferenceSuffix')!,
),
],
);
} else if (selectedValue == "3") {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
locale.translate('AreaConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('AreaGeo')!,
controller: _controller1,
suffix: locale.translate('AreaSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('RadiusConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('RadiusGeo')!,
controller: _controller2,
suffix: locale.translate('RadiusSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('CircumferenceConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('CircumferenceGeo')!,
controller: _controller4,
suffix: locale.translate('CircumferenceSuffix')!,
),
],
);
} else if (selectedValue == "4") {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10),
Text(
locale.translate('AreaConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('AreaGeo')!,
controller: _controller1,
suffix: locale.translate('AreaSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('RadiusConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('RadiusGeo')!,
controller: _controller2,
suffix: locale.translate('RadiusSuffix')!,
),
SizedBox(height: 10),
Text(
locale.translate('DiameterConvert')!,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
inputForm(
title: locale.translate('DiameterGeo')!,
controller: _controller3,
suffix: locale.translate('DiameterSuffix')!,
),
],
);
} else {
return Text('No Selection');
}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论