Flutter：如何让PageView.builder外层SizedBox高度适配子组件及设备显示尺寸？

方案1：用IntrinsicHeight自适应子项高度 #

IntrinsicHeight可以让父容器根据子组件的实际高度自动调整尺寸，刚好适配你的场景。把原来固定高度的SizedBox换成IntrinsicHeight即可，同时要确保你的UpcomingEventCard本身具备确定高度（比如内部用Column(mainAxisSize: MainAxisSize.min)，或内容本身能撑出明确高度）。

修改后的代码片段：

Scaffold(
  appBar: AppBar(),
  body: CustomScrollView(
    physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
    slivers: [
      SliverFillRemaining(
        hasScrollBody: false,
        child: Padding(
          padding: bodyPadding,
          child: Column(
            children: [
              // 替换固定高度的SizedBox为IntrinsicHeight
              IntrinsicHeight(
                child: Padding(
                  padding: largeWidgetPadding,
                  child: PageView.builder(
                    controller: _pageController,
                    itemCount: data.length,
                    itemBuilder: (context, index) => UpcomingEventCard(
                      isLeave: false,
                      eventDate: data[index].caldate,
                      description: data[index].description,
                      daysToGo: data[index].days,
                      pageController: _pageController,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
)

注意：如果PageView的item数量极多，IntrinsicHeight可能存在轻微性能损耗（需计算所有子项高度），但针对一般卡片列表场景完全适用。

方案2：用GlobalKey获取子项实际高度（更精准） #

若担心IntrinsicHeight的性能，或需要更精准控制高度，可通过GlobalKey获取第一个子项的渲染高度，再动态设置父容器高度：

1. 定义GlobalKey：

final GlobalKey _cardKey = GlobalKey();

2. 给第一个UpcomingEventCard绑定key：

itemBuilder: (context, index) => UpcomingEventCard(
  key: index == 0 ? _cardKey : null, // 仅给首个item绑定key
  isLeave: false,
  eventDate: data[index].caldate,
  description: data[index].description,
  daysToGo: data[index].days,
  pageController: _pageController,
),

3. 组件渲染后获取高度并更新状态：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (_cardKey.currentContext != null) {
      final RenderBox renderBox = _cardKey.currentContext!.findRenderObject() as RenderBox;
      final double cardHeight = renderBox.size.height;
      setState(() {
        _dynamicHeight = cardHeight;
      });
    }
  });
}

4. 替换固定高度为动态计算的高度：

SizedBox(
  height: _dynamicHeight, // _dynamicHeight需提前在State中定义，初始值可设为0或默认高度
  child: Padding(
    padding: largeWidgetPadding,
    child: PageView.builder(...),
  ),
)

额外优化：简化CustomScrollView结构 #

当前SliverFillRemaining+Column的组合存在冗余，直接用SliverToBoxAdapter包裹内容更简洁，还能减少布局层级：

Scaffold(
  appBar: AppBar(),
  body: CustomScrollView(
    physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
    slivers: [
      SliverToBoxAdapter(
        child: Padding(
          padding: bodyPadding,
          child: IntrinsicHeight(
            child: Padding(
              padding: largeWidgetPadding,
              child: PageView.builder(...),
            ),
          ),
        ),
      ),
      // 其他Sliver组件可添加在此处
    ],
  ),
)

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