Flutter轮盘扩展列表插件wheel_expand_list的使用
Flutter轮盘扩展列表插件wheel_expand_list的使用
环境
sdk: '>=2.18.1 <3.0.0'
flutter: '>=2.5.0'
示例
 |
 |
 |
 |
构造
设置轮盘位置（WheelExample）
wheelWidget.loopWidget(
context,
wheelLogic.globalKeys,
wheelLogic.textList,
wheelLogic.margin,
wheelLogic.fontSize,
)
设置轮盘位置（WheelExample2）
wheelWidget.loopWidget(
context,
wheelLogic.globalKeysLists[i],
wheelLogic.textLists[i],
wheelLogic.margin,
wheelLogic.fontSize,
)
您喜欢的设计将反映在小部件中
class WheelWidget implements WheelPrimitiveWidget {
const WheelWidget({
required this.logic,
});
final WheelLogic logic;
/*
* 您可以设置您喜欢的设计。
* */
[@override](/user/override)
Widget primitiveWidget(
BuildContext context,
String text,
double margin,
double fontSize,
) {
return Container(
width: MediaQuery.of(context).size.width - logic.margin,
color: Colors.green,
// 同样的小部件
child: Card(
child: ListTile(
leading: const Icon(Icons.people),
title: Text(
text,
style: TextStyle(
fontSize: logic.fontSize,
),
),
),
),
);
}
/*
* 用于预设小部件大小。
* */
[@override](/user/override)
Widget loopWidget(
BuildContext context,
List<GlobalKey> keys,
List<String> textList,
double margin,
double fontSize,
) {
return SingleChildScrollView(
child: Column(
children: [
for (var i = 0; i < keys.length; i++) ...[
setSizeWidget(
context,
keys[i],
textList[i],
margin,
fontSize,
),
],
],
),
);
}
/*
* 用于预设小部件大小。
* */
[@override](/user/override)
Widget setSizeWidget(
BuildContext context,
GlobalKey<State<StatefulWidget>> key,
String text,
double margin,
double fontSize,
) {
return IgnorePointer(
ignoring: true,
child: SafeArea(
child: Container(
key: key,
alignment: Alignment.topLeft,
width: MediaQuery.of(context).size.width - margin,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 1),
opacity: 0,
// 同样的小部件
child: Card(
child: ListTile(
leading: const Icon(Icons.people),
title: Text(
text,
style: TextStyle(
fontSize: logic.fontSize,
),
),
),
),
),
),
),
);
}
}
完整示例代码
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:wheel_expand_list/wheel_expand_list.dart';
import 'package:wheel_expand_list/wheel_logic.dart';
import 'package:wheel_expand_list_example/wheel_data_set.dart' show WheelDataSet;
import 'package:wheel_expand_list_example/wheel_extension_logic.dart';
import 'package:wheel_expand_list_example/wheel_widget.dart';
void main() {
runApp(const WheelExample());
}
class WheelExample extends StatelessWidget {
const WheelExample({
super.key,
});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const WheelPage(),
);
}
}
class WheelPage extends StatefulWidget {
const WheelPage({
super.key,
});
[@override](/user/override)
State<WheelPage> createState() => WheelPageState();
}
class WheelPageState extends State<WheelPage> {
var wheelLogic = WheelLogic();
late WheelDataSet wheelDataSet;
late WheelWidget wheelWidget;
refresh() => setState(() {});
[@override](/user/override)
void initState() {
updateData(true);
super.initState();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leadingWidth: 100,
title: Text('index${wheelLogic.indexCount}: page${wheelLogic.pageCount}'),
actions: [
Row(
children: [
rightOfLeftButton(),
rightOfRightButton(),
],
),
],
leading: Row(
children: [
leftOfLeftButton(),
leftOfRightButton(),
],
),
),
body: Stack(
children: [
wheelWidget.loopWidget(
context,
wheelLogic.globalKeys,
wheelLogic.textList,
wheelLogic.margin,
wheelLogic.fontSize,
),
StreamBuilder(
stream: wheelLogic.streamController.stream,
builder: (
BuildContext context,
AsyncSnapshot<List<double>> snapshot,
) {
if (snapshot.hasData) {
return WheelExpandList(
callBack: (index) {
Future(() {
setState(() {
wheelLogic.indexCount = index;
});
});
},
pageStart: (index) {
wheelLogic.slideActionFlg
? wheelDataSet.startController(
index,
300,
wheelLogic.controller,
Curves.slowMiddle,
)
: wheelDataSet.startController(
index,
300,
wheelLogic.controller,
Curves.easeOut,
);
},
pageEnd: (value) {
Future(() {
setState(() {
wheelLogic.indexCount = 0;
wheelLogic.pageCount = value;
});
});
},
wheelDataModel: wheelDataSet,
wheelPrimitiveWidget: wheelWidget,
wheelLogic: wheelLogic,
);
} else {
return Container();
}
},
),
],
),
);
}
}
更多关于Flutter轮盘扩展列表插件wheel_expand_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter轮盘扩展列表插件wheel_expand_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用 wheel_expand_list 这个 Flutter 插件的示例代码。这个插件通常用于创建一个可扩展的轮盘列表，适合用于选择器等场景。
首先，确保你已经在 pubspec.yaml 文件中添加了 wheel_expand_list 依赖：
dependencies:
flutter:
sdk: flutter
wheel_expand_list: ^最新版本号 # 请替换为实际的最新版本号
然后运行 flutter pub get 来获取依赖。
接下来，在你的 Dart 文件中，你可以使用 WheelExpandList 组件。以下是一个完整的示例代码：
import 'package:flutter/material.dart';
import 'package:wheel_expand_list/wheel_expand_list.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Wheel Expand List Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WheelExpandListDemo(),
);
}
}
class WheelExpandListDemo extends StatefulWidget {
@override
_WheelExpandListDemoState createState() => _WheelExpandListDemoState();
}
class _WheelExpandListDemoState extends State<WheelExpandListDemo> {
List<String> items = List.generate(20, (index) => "Item $index");
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Wheel Expand List Demo'),
),
body: Center(
child: WheelExpandList(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 1.0),
),
child: Text(
items[index],
style: TextStyle(fontSize: 20),
),
);
},
selectedIndex: selectedIndex,
onSelectedIndexChanged: (index) {
setState(() {
selectedIndex = index;
});
},
itemExtent: 50.0,
expandItemCount: 5, // Number of items to expand
axis: Axis.vertical, // Change to Axis.horizontal if needed
),
),
);
}
}
代码解释：
- 依赖导入：确保你导入了
wheel_expand_list包。 - 创建应用：在
MyApp类中设置了基本的 Material 应用。 - 主页面：
WheelExpandListDemo是主页面，它包含状态管理，用于处理选中项的变更。 - 数据准备：
items列表包含轮盘中的项，selectedIndex保存当前选中的项索引。 - 构建 UI：
- 使用
Scaffold组件来构建页面布局。 WheelExpandList组件用于显示可扩展的轮盘列表。itemBuilder用于构建每一项的 UI。selectedIndex表示当前选中的项。onSelectedIndexChanged用于处理选中项变更事件。itemExtent设置每个项的高度（如果是水平轴，则为宽度）。expandItemCount设置要扩展显示的项的数量。axis设置轮盘的轴方向（垂直或水平）。
- 使用
这个示例展示了如何使用 wheel_expand_list 插件来创建一个简单的可扩展轮盘列表。你可以根据需要进一步自定义和扩展此示例。
