【Flutter】【ListWheelScrollView】有意思的wiget(1)

widget:ListWheelScrollView

滚筒的widget 样式，一直使用listview 等方式的可以滚动的列表，样式比较单一，ListWheelScrollView 可以滚动列表的样式，变得很花俏，但是不能再list数据过多的时候使用

---

使用实例和代码：

import 'package:flutter/material.dart';

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class MyHomePage extends StatefulWidget {
 const MyHomePage({super.key, required this.title});

 final String title;

 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: Container(
           color: Colors.amberAccent,
           child: ListWheelScrollView(
               perspective: 0.003,
               offAxisFraction: -0.5, //偏移距离
               itemExtent: 150, //高度
               diameterRatio: 1.5, //调整直径
               //放大镜功能，useMagnifier开启之后才能使用，放大倍数，就是当前显示的widget 放大的倍数
               useMagnifier: true,
               magnification: 1.5,
               children: List.generate(
                   10,
                   (index) => Card(
                         color: Colors
                             .primaries[index % (Colors.primaries.length)],
                         child: const ListTile(
                           title: Text("ok"),
                           trailing: Icon(Icons.baby_changing_station),
                         ),
                       )))));
 }
}

---

截图：

squeeze 设置为2的时候显示的情况如下：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
            color: Colors.amberAccent,
            child: ListWheelScrollView(
                // perspective: 0.003,
                squeeze: 1, //有点类似分页的工，1 时候就多页，2 显示的页面就更少，widget 会叠加在一起
                // offAxisFraction: -0.5, //偏移距离
                itemExtent: 150, //高度
                // diameterRatio: 1.5, //调整直径
                //放大镜功能，useMagnifier开启之后才能使用，放大倍数，就是当前显示的widget 放大的倍数
                // useMagnifier: true,
                // magnification: 1.5,
                children: List.generate(
                    10,
                    (index) => Card(
                          color: Colors
                              .primaries[index % (Colors.primaries.length)],
                          child: const ListTile(
                            title: Text("ok"),
                            trailing: Icon(Icons.baby_changing_station),
                          ),
                        )))));
  }
}

最后

可以自己尝试使用，调节不同的参数，在数据很多需要显示的时候，不要使用该widget，性能会有很大的问题。