You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 02:54:03