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.
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;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
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,性能会有很大的问题。