Flutter页面堆叠管理插件stack_page_view的使用
Flutter页面堆叠管理插件stack_page_view的使用
你可以使用StackPageView
在Android和iOS中保持页面视图项的位置。
特性
在Flutter中实现带有头部的页面视图形式并不像你想象的那么简单。当你在一个特定页面项上上下滚动时,它可能会滚动到其他页面项上。而且,当你切换标签页时,每个页面的位置不会被保留,有时甚至会被重置。
StackPageView
就是为了解决这个问题而创建的。
视频
完整示例代码
import 'package:flutter/material.dart';
import 'package:stack_pageview/stackPageView/stackPageViewInterface.dart';
import 'pageItem/pageItem.dart';
import 'stackPageView/stackPageView.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
[@override](/user/override)
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
late TabController _tabController;
final List<String> _tabLabels = ["Tab A", "Tab B", "Tab C"];
List<ScrollController> scrollControllers = [];
StackPageViewInterface? interface;
[@override](/user/override)
void initState() {
_tabController = TabController(
length: _tabLabels.length,
vsync: this,
animationDuration: const Duration(milliseconds: 200));
for (var o in _tabLabels) {
scrollControllers.add(ScrollController());
}
super.initState();
}
[@override](/user/override)
void dispose() {
_tabController.dispose();
for (int i = 0; i < _tabLabels.length; i++) {
scrollControllers[i].dispose();
}
super.dispose();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("StackPageView"),
elevation: 0,
),
body: Column(
children: [
Expanded(
child: StackPageView(
header: _header(),
headerHeight: 100,
tabBar: _tabBar(),
timerPeriodic: 1,
tabController: _tabController,
scrollControllers: scrollControllers,
interface: (interface) => this.interface = interface,
tabBarViews: _tabBarView(),
dragY: 10,
controller: (controller) {},
tabBarBackground: _tabDivider(),
tabBarBackgroundColor: Colors.white,
),
),
_button(),
],
),
);
}
Widget _header() {
return Container(
color: Colors.blue,
height: 100,
child: const Center(
child: Text(
"Header",
style: TextStyle(fontSize: 30, color: Colors.white),
),
),
);
}
TabBar _tabBar() {
return TabBar(
controller: _tabController,
indicatorColor: Colors.black,
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
tabs: List.generate(_tabLabels.length, (index) {
return SizedBox(
height: 45,
child: Center(child: Text(_tabLabels[index])),
);
}),
);
}
List<Widget> _tabBarView() {
return [
PageItem(
text: "Tab A",
scrollController: scrollControllers[0],
),
PageItem(
text: "Tab B",
scrollController: scrollControllers[1],
),
PageItem(
text: "Tab C",
scrollController: scrollControllers[2],
),
];
}
Widget _button() {
return Row(
children: [
ElevatedButton(
onPressed: () {
print('interface : $interface');
interface?.goTop();
},
child: const Text("Go top"),
),
ElevatedButton(
onPressed: () => interface?.goBottom(),
child: const Text("Go bottom"),
),
],
);
}
/// 分割线 widget
Widget _tabDivider() {
return const Positioned(
left: 0,
right: 0,
bottom: 0,
child: Divider(
height: 2,
thickness: 2,
color: Colors.grey,
),
);
}
}
class PageItem extends StatefulWidget {
PageItem({
required this.text,
required this.scrollController,
Key? key,
}) : super(key: key);
String text;
ScrollController scrollController;
[@override](/user/override)
_PageItemState createState() => _PageItemState();
}
class _PageItemState extends State<PageItem> {
int itemCount = 30;
[@override](/user/override)
void initState() {
super.initState();
}
[@override](/user/override)
Widget build(BuildContext context) {
return ListView.builder(
physics: const ClampingScrollPhysics(),
padding: const EdgeInsets.only(bottom: 100),
controller: widget.scrollController,
itemCount: itemCount,
itemBuilder: (context, index) {
if (index == itemCount - 1) addData();
return SizedBox(
width: double.infinity,
height: 50,
child: Text("${widget.text} : ${index.toString()}"),
);
},
);
}
addData() async {
if (!mounted) return;
await Future.delayed(const Duration(milliseconds: 300));
setState(() {
itemCount += 20;
});
}
}
更多关于Flutter页面堆叠管理插件stack_page_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter页面堆叠管理插件stack_page_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
stack_page_view
是一个用于 Flutter 的插件,它允许你在一个视图中堆叠多个页面,并可以通过滑动或按钮切换这些页面。这对于需要在一个页面上显示多个层级内容的应用程序非常有用。
安装插件
首先,你需要在 pubspec.yaml
文件中添加 stack_page_view
插件的依赖:
dependencies:
flutter:
sdk: flutter
stack_page_view: ^0.0.1 # 请使用最新版本
然后运行 flutter pub get
来安装插件。
使用 StackPageView
StackPageView
的主要特点是它可以堆叠多个页面,并且可以控制页面的切换。
基本用法
import 'package:flutter/material.dart';
import 'package:stack_page_view/stack_page_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('StackPageView Demo'),
),
body: StackPageView(
children: [
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue),
],
),
);
}
}
在这个例子中,StackPageView
包含了三个不同颜色的 Container
,你可以通过滑动来切换这些页面。
控制页面切换
你可以通过 StackPageController
来控制页面的切换。
class HomePage extends StatefulWidget {
[@override](/user/override)
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final StackPageController _controller = StackPageController();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('StackPageView Demo'),
),
body: StackPageView(
controller: _controller,
children: [
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_controller.nextPage(duration: Duration(milliseconds: 300), curve: Curves.easeInOut);
},
child: Icon(Icons.arrow_forward),
),
);
}
}