如何让Flutter PageView滚动区域排除PageIndicator区域？

问题根源：当前使用Stack将PageIndicator叠加在PageView上方，导致PageView的滚动区域覆盖了PageIndicator的位置，当内容垂直滚动到底部时会被遮挡。

推荐两种解决方法：

方法一：改用Column布局（最稳妥） #

将原来的Stack替换为Column，用Expanded包裹PageView，让它占满除PageIndicator外的所有空间，PageView的滚动区域自然不会包含底部指示器的位置。

修改_PageViewExampleState中的build方法：

@override
Widget build(BuildContext context) {
  final TextTheme textTheme = Theme.of(context).textTheme;

  return Column(
    children: <Widget>[
      Expanded(
        child: PageView(
          controller: _pageViewController,
          onPageChanged: _handlePageViewChanged,
          children: <Widget>[
            SingleChildScrollView(
              child: Column(
                children: [
                  SizedBox(
                    height: 800.0,
                    child: Text('First Page', style: textTheme.titleLarge),
                  ),
                  Text('Hello',
                      style: Theme.of(context)
                          .primaryTextTheme
                          .headlineLarge
                          ?.copyWith(color: Colors.black)),
                ],
              ),
            ),
            Center(
              child: Text('Second Page', style: textTheme.titleLarge),
            ),
            Center(
              child: Text('Third Page', style: textTheme.titleLarge),
            ),
          ],
        ),
      ),
      PageIndicator(
        tabController: _tabController,
        currentPageIndex: _currentPageIndex,
        onUpdateCurrentPageIndex: _updateCurrentPageIndex,
        isOnDesktopAndWeb: _isOnDesktopAndWeb,
      ),
    ],
  );
}

方法二：给滚动内容添加底部内边距 #

如果坚持使用Stack布局，可以给第一个页面的滚动内容添加底部内边距，内边距高度等于PageIndicator的总高度（包含padding），且仅在桌面和Web平台生效（移动端PageIndicator会隐藏）。

修改第一个SingleChildScrollView的子组件：

SingleChildScrollView(
  child: Padding(
    padding: EdgeInsets.only(bottom: _isOnDesktopAndWeb ? 60.0 : 0.0), // 60为指示器的预估高度
    child: Column(
      children: [
        SizedBox(
          height: 800.0,
          child: Text('First Page', style: textTheme.titleLarge),
        ),
        Text('Hello',
            style: Theme.of(context)
                .primaryTextTheme
                .headlineLarge
                ?.copyWith(color: Colors.black)),
      ],
    ),
  ),
),

说明 #

方法一无需手动计算高度，布局会自动适配不同设备和指示器样式，适配性更强，更推荐使用。

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