我为显示值添加了两个ListWheelScrollView第一个用于数字(1-9)，第二个用于字符串值，例如小时，天，周和月
但是焦点项目设计不会像下图所示。
我想要的车轮 list
代码段:
Container(
// padding:const EdgeInsets.all(5) ,
margin: const EdgeInsets.only(left: 10, right: 10),
height: MediaQuery.of(context).size.height/4,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(10)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height/4,
width: MediaQuery.of(context).size.width/2.5,
child: ListWheelScrollView(
itemExtent: 20,
useMagnifier: true,
diameterRatio: 1.0,
magnification: 2.0,
onSelectedItemChanged: (val){
setState(() {
selectedReminderVal = reminderVal[val];
print("selectedReminderVal:$selectedReminderVal");
});
},
children:
reminderVal.map((item) =>Text(item,
style: TextStyle(
fontSize:15,
// fontWeight:FontWeight.bold,
),
),)
.toList(),
),
),
Container(
height: MediaQuery.of(context).size.height/4,
width: MediaQuery.of(context).size.width/2.5,
child: ListWheelScrollView(
itemExtent: 20,
useMagnifier: true,
diameterRatio: 1.0,
magnification: 2.0,
onSelectedItemChanged: (val){
setState(() {
selectedReminderDay = reminderDay[val];
print("selectedReminderDay:$selectedReminderDay");
});
},
children: reminderDay.map((item) =>Text(item,
style: TextStyle(
fontSize:15,
// fontWeight:FontWeight.bold,
),
),)
.toList(),
),
),
],
)
),
最佳答案
您可以在CupertinoPicker中使用两个Row:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Center(
child: CupertinoButton(
onPressed: showPicker,
child: Text('Pick'),
color: Colors.blueAccent,
),
),
),
),
);
}
showPicker() {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200.0,
color: Colors.white,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: CupertinoPicker(
scrollController: new FixedExtentScrollController(
initialItem: 0,
),
itemExtent: 30,
backgroundColor: Colors.white,
onSelectedItemChanged: (int index) {
setState(() {
selectedReminderVal = index;
});
},
children: reminderVal
.map(
(item) => Center(
child: Text(
item,
style: TextStyle(
fontSize: 16,
// fontWeight:FontWeight.bold,
),
),
),
)
.toList()),
),
Expanded(
child: CupertinoPicker(
scrollController: new FixedExtentScrollController(
initialItem: 0,
),
itemExtent: 30,
backgroundColor: Colors.white,
onSelectedItemChanged: (int index) {
setState(() {
selectedReminderDay = index;
});
},
children: reminderDay
.map(
(item) => Center(
child: Text(
item,
style: TextStyle(
fontSize: 16,
// fontWeight:FontWeight.bold,
),
),
),
)
.toList()),
),
]));
});
}
关于flutter - 如何设计自定义ListWheelScrollView像下面的图像在 flutter ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63260064/