服装加盟的网站建设,桂阳网页定制,wordpress目录权限设置密码,wordpress 营销需求
在 Flutter 中#xff0c;PageView 是一个非常常用的组件#xff0c;能够实现多个页面的滑动切换。然而#xff0c;默认的 PageView 高度是固定的#xff0c;这在展示不同高度的页面时#xff0c;可能会导致不必要的空白或内容裁剪问题。为了使 PageView 能够根据每…需求
在 Flutter 中PageView 是一个非常常用的组件能够实现多个页面的滑动切换。然而默认的 PageView 高度是固定的这在展示不同高度的页面时可能会导致不必要的空白或内容裁剪问题。为了使 PageView 能够根据每个页面的内容高度动态调整我们需要一个自适应高度的 PageView 实现。
效果 本方案的 PageView 可以根据每个页面内容的高度自动调整保证每个页面的内容在其实际高度内完整显示并且在页面滑动时使用平滑的过渡效果。具体来说
每个页面的内容高度不同PageView 能够动态调整高度。页面切换时高度变化平滑不会造成突兀的视觉效果。
实现思路
1. 测量每个页面的高度
首先我们需要为每个页面添加一个高度测量的机制测量页面内容的高度。在 Flutter 中我们可以通过 GlobalKey 和 RenderBox 获取每个 Widget 的实际高度。
2. 动态调整 PageView 高度
在页面滑动时我们需要根据滑动的进度动态计算当前 PageView 的高度。这就需要在 PageView 的滑动过程中实时更新高度使得高度随滑动位置逐步过渡。
3. 动态高度过渡
我们可以使用 AnimatedContainer 来平滑过渡 PageView 的高度避免切换时高度变化过于突兀。通过监听 PageView 的滑动状态实时调整容器高度。
实现代码
1. 高度测量组件 HeightMeasureWidget
这个组件负责测量每个页面的高度并将测量结果通过回调传递出去。
import package:flutter/material.dart;class HeightMeasureWidget extends StatefulWidget {final Widget child;final Function(double height) onHeightChanged;const HeightMeasureWidget({super.key, required this.child, required this.onHeightChanged});overrideHeightMeasureState createState() HeightMeasureState();
}class HeightMeasureState extends StateHeightMeasureWidget {final GlobalKey _key GlobalKey();overridevoid initState() {super.initState();WidgetsBinding.instance.addPostFrameCallback((_) {_measureHeight();});}void _measureHeight() {final RenderBox? renderBox _key.currentContext!.findRenderObject() as RenderBox?;if (renderBox ! null) {widget.onHeightChanged(renderBox.size.height);}}overrideWidget build(BuildContext context) {return Container(key: _key,child: widget.child,);}
}2. 自适应高度的 AutoHeightPageView
这个组件使用了前面创建的 HeightMeasureWidget 来测量每个页面的高度然后根据滑动进度调整高度。
import package:flutter/material.dart;
import measure_height_widget.dart;class AutoHeightPageView extends StatefulWidget {final ListWidget children;final PageController pageController;const AutoHeightPageView({Key? key,required this.children,required this.pageController,}) : super(key: key);overrideAutoHeightPageViewState createState() AutoHeightPageViewState();
}class AutoHeightPageViewState extends StateAutoHeightPageView {final Listdouble _heights [];double _currentHeight 0;overridevoid initState() {super.initState();widget.pageController.addListener(_updateHeight);}void _updateHeight() {if (widget.pageController.position.haveDimensions _heights.isNotEmpty) {double page widget.pageController.page ?? 0.0;int index page.floor();int nextIndex (index 1) _heights.length ? index 1 : index;double percent page - index;double height _heights[index] (_heights[nextIndex] - _heights[index]) * percent;setState(() {_currentHeight height;});}}overrideWidget build(BuildContext context) {var isMeasureHeight _heights.length widget.children.length ? false : true;return Column(children: [Stack(children: [Visibility(visible: isMeasureHeight,child: Stack(children: widget.children.map((e) HeightMeasureWidget(child: e,onHeightChanged: (height) {_heights.add(height);if (_heights.length widget.children.length) {setState(() {_currentHeight _heights[0];});}},)).toList(),),),if (!isMeasureHeight)AnimatedContainer(duration: const Duration(milliseconds: 200),height: _currentHeight,curve: Curves.easeOut,child: PageView(controller: widget.pageController,children: widget.children,),),],)],);}overridevoid dispose() {widget.pageController.dispose();super.dispose();}
}3. 使用示例 AutoHeightPageViewPage
该页面演示了如何使用自适应高度的 PageView通过内容高度的动态调整确保 PageView 始终适应当前页面的高度。
import package:flutter/material.dart;
import package:flutter_xy/r.dart;
import package:flutter_xy/xydemo/vp/pageview/auto_height_page_view.dart;class AutoHeightPageViewPage extends StatefulWidget {const AutoHeightPageViewPage({Key? key}) : super(key: key);overrideStateStatefulWidget createState() AutoHeightPageViewState();
}class AutoHeightPageViewState extends StateAutoHeightPageViewPage {final PageController _pageController PageController();overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(自适用高度PageView),),body: Container(color: Colors.white,child: SingleChildScrollView(child: Column(children: [AutoHeightPageView(pageController: _pageController,children: [Container(color: Colors.white,child: ListView(shrinkWrap: true,physics: const NeverScrollableScrollPhysics(),children: [Container(color: Colors.red,height: 50,alignment: Alignment.center,child: const Text(第一个界面),),Container(color: Colors.yellow,height: 50,alignment: Alignment.center,child: const Text(第一个界面),),Container(color: Colors.blue,height: 50,alignment: Alignment.center,child: const Text(第一个界面),),],),),Container(color: Colors.green,height: 250,child: const Center(child: Text(第二个界面))),],),Image.asset(R.vp_content_jpg,width: MediaQuery.of(context).size.width,fit: BoxFit.fill,),],),),),);}
}总结
通过本方案我们实现了一个自适应高度的 PageView它能够根据每个页面的内容高度进行动态调整。该实现依赖于对每个页面内容的测量并使用 AnimatedContainer 来平滑地过渡高度变化。这样可以确保页面切换时用户体验更加自然流畅避免了内容被裁剪或空白区域的出现。这种自适应高度的 PageView 非常适合用于不同页面内容高度不一致的场景。
详情github.com/yixiaolunhui/flutter_xy
