[英]How to create Cupertino picker that has both kg and lbs option in Flutter
我正在尝试创建一个 Cupertino Picker,它将显示重量和其他选项,例如 kg 和 lb。我已经尝试解决了。 它适用于"kg"
但我如何显示"lb"
以及如何在选择 55 kg 后获得并显示相同的 121.245 lb 反之亦然,因此两个值应该相等,例如55 kg = 121.254 lb
这是我的代码
// weight - 22.0 to 227.0 kg
// weight declarations
var _selectedWeight = 150;
var _selectedWeightDecimals = 0;
var _selectedUnits = "lbs";
var units = ['kgs', 'lbs'];
var lbs = [];
var kgs = [];
@override
void initState() {
for (int j = 22; j <= 227; j++) {
kgs.add(j);
lbs.add(j * 2.20462);
}
}
//Selection dropdown for Kgs and Lbs
const SizedBox(height: 15),
const Text(
'WEIGHT',
style: TextConstants.feildHeadText,
),
const SizedBox(
height: 2,
),
Container(
height: 51,
width: double.infinity,
padding: const EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(40)),
border: Border.all(
color: Colors.grey,
width: 1,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CupertinoButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return SizedBox(
height: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: CupertinoPicker(
itemExtent: 32,
onSelectedItemChanged: (int index) {
if (_formKey.currentState!.validate()) {
const Text(
"Please select Weight",
style: TextStyle(
color: Colors.red,
fontSize: 16,
),
);
}
setState(
() {
_selectedWeight = kgs[index];
},
);
},
children: List<Widget>.generate(
kgs.length,
(int index) {
return Center(
child: Text(kgs[index].toString()),
);
},
),
),
),
Expanded(
child: CupertinoPicker(
itemExtent: 32,
onSelectedItemChanged: (int index) {
if (_formKey.currentState!.validate()) {
const Text(
"Please select Units",
style: TextStyle(
color: Colors.red,
fontSize: 16,
),
);
}
setState(
() {
_selectedUnits = units[index];
},
);
},
children: List<Widget>.generate(
units.length,
(int index) {
return Center(
child: Text(units[index]),
);
},
),
),
),
],
),
);
},
);
},
child: Text(
'$_selectedWeight.$_selectedWeightDecimals $_selectedUnits',
style: const TextStyle(
height: 1,
color: Colors.black,
fontSize: 16,
),
),
),
SvgPicture.asset(
'assets/icons/dropdown.svg',
),
],
),
),
如何获得磅值和如上所述
预期结果如下
您必须确保您正在重建CupertinoPicker
的权重。 为此,首先,将_selectedUnits
ValueNotifier
。
final _selectedUnits = ValueNotifier('lbs');
然后包裹重量CupertinoPicker
在ValueListenableBuilder
,检查的值_selectedUnits
以确定在LIS中显示哪些值。
Expanded(
child: ValueListenableBuilder<String>(
valueListenable: _selectedUnits,
builder: (context, selectedUnits, _) {
return CupertinoPicker(
itemExtent: 32,
onSelectedItemChanged: (int index) {
if (_formKey.currentState!.validate()) {
const Text("Please select Weight",
style: TextStyle(
color: Colors.red,
fontSize: 16,
),
);
}
setState(
() {
_selectedWeight = kgs[index];
},
);
},
children: List<Widget>.generate(
kgs.length,
(int index) {
return Center(
child: Text(
'${selectedUnits == 'kgs' ? kgs[index] : lbs[index]}'),
);
},
),
);
}),
),
最后,将您单元CupertinoPicker
的onSelectedItemChanged
的setState
调用替换为
_selectedUnits.value = units[index];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.