如何在Flutter应用的左下角对齐放置Text widget以显示当前页码
解决方案
- 修复原代码中
OverviewScreen构造函数的参数语法错误 - 在
_OverviewScreenState类中声明当前页码状态变量,给PageController绑定页面滑动监听,滑动时实时更新页码状态 - 在外层
Stack的子组件中新增Positioned定位组件,固定在屏幕左下角展示页码文本 - 页面销毁时释放
PageController资源,避免内存泄漏
完整修改后代码
import 'package:flutter/material.dart'; class OverviewScreen extends StatefulWidget { // 修复原构造函数参数错误 const OverviewScreen({super.key}); @override _OverviewScreenState createState() => _OverviewScreenState(); } class _OverviewScreenState extends State<OverviewScreen> { final PageController pageController = PageController(initialPage: 0); // 声明当前页码状态变量 int _currentPage = 0; @override void initState() { super.initState(); // 监听页面滑动变化 pageController.addListener(() { setState(() { _currentPage = pageController.page?.round() ?? 0; }); }); } @override void dispose() { // 释放控制器资源 pageController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( drawer: const NavigationDrawerWidget(), extendBodyBehindAppBar: true, appBar: AppBar( title: const Text( "Hu R Rehman", style: TextStyle(fontFamily: "MonteCarlo"), ), centerTitle: true, shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(bottom: Radius.circular(16)) ), backgroundColor: Colors.transparent, elevation: 0, ), body: Center( child: Stack( alignment: Alignment.center, children: [ PageView( controller: pageController, children: [ Stack( alignment: Alignment.center, children: [ Image( image: const AssetImage('Image/soc1.jpg'), fit: BoxFit.cover, width: double.infinity, height: double.infinity, ), const Text( ' Hello world ', style: TextStyle( fontSize: 34.0, fontFamily: "Explora", color: Colors.white, fontWeight: FontWeight.w900 ), ), ], ), p1(),p2(), p3(), p5(),p6(),p4(),p7(),p8() ], ), // 左下角页码展示组件 Positioned( left: 24, bottom: 40, child: Text( // 总页数为9,可根据实际页面数量调整 '${_currentPage + 1}/9', style: const TextStyle( color: Colors.white, fontSize: 22, fontWeight: FontWeight.bold ), ), ) ], ), ) ), ); } } // 以下为原有自定义组件占位,无需修改 Widget p1() => const SizedBox(); Widget p2() => const SizedBox(); Widget p3() => const SizedBox(); Widget p4() => const SizedBox(); Widget p5() => const SizedBox(); Widget p6() => const SizedBox(); Widget p7() => const SizedBox(); Widget p8() => const SizedBox(); class NavigationDrawerWidget extends StatelessWidget { const NavigationDrawerWidget({super.key}); @override Widget build(BuildContext context) { return const Drawer(); } }
内容的提问来源于stack exchange,提问作者Arefin
相关产品推荐
相关产品推荐

