Flutter ListWheelScrollView , 如何添加水平线

Posted 2023-02-23

【中文标题】Flutter ListWheelScrollView , 如何添加水平线

【英文标题】：Flutter ListWheelScrollView , How to add horizontal lines

【发布时间】：2021-02-09 17:30:22

【问题描述】：

这是 flutter_datetime_picker 的 UI。如何像这样添加水平线：

这是我的代码和 UI。

ListWheelScrollView(
  itemExtent: 20,
  diameterRatio: 0.9,
  perspective: 0.003,
  controller: dayScrollController,
  physics: FixedExtentScrollPhysics(
    parent: BouncingScrollPhysics(),
  ),
  children: dayList.map((item) 
    return Container(
      height: 20,
      alignment: Alignment.center,
      child: Container(
        child: Text(
          '$item',
          style: TextStyle(
            color: dayList.indexOf(item) != dayIndex ? Colors.grey : Colors.black,
            fontSize: 20
          ),
        ),
      )
    );
  ).toList(),
  onSelectedItemChanged: (index) 
    setState(() 
      dayIndex = index;
    );
  ,
),

【问题讨论】：

This 或许能帮到你。

【参考方案1】：

您可以使用CupertinoPicker 小部件，如下所示：

或者如果你想制作一个选择日期和时间的小部件，你也可以使用CupertinoDatePicker小部件，它看起来像这样：

如需更多 Cupertino（ios 风格）小部件，请查看此页面：https://flutter.dev/docs/development/ui/widgets/cupertino

【参考方案2】：

尝试将这两行添加为 ListWheelScrollView 下的属性：

useMagnifier: true,
magnification: 1.2,

或使用CupertinoPicker