SmoothPageIndicator定位计算：如何让轮播指示器居屏幕底部？

问题根源 #

你之前的高度计算混淆了逻辑像素和物理像素：PlatformDispatcher.instance.views.first.physicalSize是物理像素单位，而MediaQuery.of(context).size.height是逻辑像素单位，两者混用会导致跨设备适配失效。同时SingleChildScrollView会让Column高度不受屏幕限制，无法保证指示器固定在底部。

修复方案（推荐） #

用Expanded让PageView自动填充剩余空间，无需手动计算高度，天然适配所有设备：

SafeArea(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Expanded( // 替换原SizedBox，让PageView占满屏幕剩余空间
        child: PageView.builder(
          controller: controller,
          itemCount: pages.length,
          onPageChanged: (index) {
            setState(() {
              hourIndex = index;
            });
          },
          itemBuilder: (_, index) {
            return pages[index % pages.length];
          },
          physics: const AlwaysScrollableScrollPhysics(),
        ),
      ),
      const SizedBox(height: 8), // 调整指示器与PageView的间距
      SmoothPageIndicator(
        controller: controller,
        count: pages.length,
        effect: const WormEffect(
          dotHeight: 16,
          dotWidth: 16,
          type: WormType.thinUnderground,
        ),
      ),
      const SizedBox(height: 16), // 给指示器底部留安全距离，避免被底部导航栏遮挡
    ],
  ),
);

手动计算高度的正确方式（若需保留SingleChildScrollView） #

如果必须保留滚动容器，统一用逻辑像素计算，同时考虑SafeArea边距：

SafeArea(
  child: SingleChildScrollView(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: MediaQuery.of(context).size.height -
              kBottomNavigationBarHeight -
              AppBar().preferredSize.height -
              MediaQuery.of(context).padding.top - // 顶部状态栏边距
              MediaQuery.of(context).padding.bottom - // 底部安全边距
              18, // 指示器高度(16)+间距(2)，可按需调整
          child: PageView.builder(
            // 原有PageView代码不变
          ),
        ),
        const SizedBox(height: 2),
        SmoothPageIndicator(
          // 原有指示器代码不变
        ),
      ],
    ),
  ),
);

关键注意点 #

• 布局计算统一用MediaQuery.of(context).size的逻辑像素，避免和物理像素混用
• 优先使用Expanded/Flexible这类弹性组件，减少手动计算高度的适配风险
• 必须考虑SafeArea的上下边距，防止内容被状态栏、底部导航栏遮挡

内容的提问来源于stack exchange，提问作者Raj More