flutter - 如何设计自定义ListWheelScrollView像下面的图像在 flutter ？

Question

我为显示值添加了两个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(),
                           
                                                       
                         ),
                       ),
                     ],
                   )
                 ),

我从这段代码中得到了什么:

Answer 1

您可以在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()),
                    ),
                  ]));
        });
  }

结果: