Flutter 滚动组件ListWheelScrollView

737 阅读1分钟

Simulator Screen Shot - iPhone 14 Pro Max - 2023-05-13 at 10.44.50.png

//3D转轮效果,不能进行横向的滚动。想要横向滚动需要套一个Rotatebox
body: RotatedBox(
  quarterTurns: 1,
  child: ListWheelScrollView(
    itemExtent: 100,
    children: List.generate(100, (index) {
      return Container(
        color: Colors.blue,
        alignment: Alignment.center,
        child: Text("hellow"),
      );
    }),
    //  轴心的偏移
    //   offAxisFraction: 1.2,
    //  直径比。主要效果是列表的弯曲程度。
    diameterRatio: 4.0,
    //设置除中间的一个外。其他的的透明度,设置了透明度后放大镜效果自动打开。如果没有设置透明度
    // overAndUnderCenterOpacity: 0.5,
    //  放大镜的效果。放大中间的那块
    //   magnification: 1.5,
    //需要设置
    useMagnifier: true,
    //  滚动物理
    //   physics: NeverScrollableScrollPhysics(),//不能滚动
    physics: FixedExtentScrollPhysics(),
    //保证滚动后。准确的停留在某个cell上。
    onSelectedItemChanged: (index) {
      print("停留在那个位置上进行打印");
    },
  ),
),

Simulator Screen Shot - iPhone 14 Pro Max - 2023-05-13 at 14.08.07.png

//设置除中间的一个外。其他的的透明度,设置了透明度后放大镜效果自动打开。如果没有设置透明度
  // overAndUnderCenterOpacity: 0.5,
//  放大镜的效果。放大中间的那块
//   magnification: 1.5,
  //需要设置
  useMagnifier: true,

Simulator Screen Shot - iPhone 14 Pro Max - 2023-05-13 at 14.23.32.png

//   physics: NeverScrollableScrollPhysics(),//不能滚动
physics: FixedExtentScrollPhysics(),//保证滚动后。准确的停留在某个cell上。
onSelectedItemChanged: (index) {
  print("停留在那个位置上进行打印");
},