Flutter实现组件高度自适应：商品页DefaultTabController高度动态调整

要让Tab区域高度根据内容自动调整，同时保持页面整体可滚动，你需要做以下几个关键修改：

核心修改点 #

• 移除包裹DefaultTabController的固定高度SizedBox，这是限制高度自适应的关键障碍
• 去掉TabBarView外层的Expanded组件，避免强制占满剩余空间
• 利用外层的SingleChildScrollView处理整体滚动，让Tab区域的高度由内部内容自然撑开

修改后的完整代码 #

Widget buildProduct({required ProductItem product, required context}) {
  final media = product.media!.map((e) => e.toJson()).toList();
  var mediaQuery = MediaQuery.of(context).size;
  return SingleChildScrollView(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        SizedBox(
          height: mediaQuery.height * 0.4,
          child: ImageList()
        ),
        Container(
          color: Theme.of(context).colorScheme.secondary,
          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                product.name,
                style: const TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 4.0),
              Text(
                product.categoryName!,
                style: const TextStyle(
                  fontSize: 14.0,
                  color: Colors.grey,
                ),
              ),
              const SizedBox(height: 8.0),
              Text(
                '${product.price} ₸',
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.red,
                ),
              ),
            ],
          ),
        ),
        const SizedBox(height: 8.0),
        // 移除固定高度的SizedBox
        DefaultTabController(
          length: 2,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                height: 35.h,
                color: Theme.of(context).colorScheme.secondary,
                child: const TabBar(
                  padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0),
                  tabs: [
                    Tab(text: 'О товаре'),
                    Tab(text: 'В наличии'),
                  ],
                ),
              ),
              // 移除Expanded，让TabBarView根据内容自适应高度
              TabBarView(
                children: [
                  Container(
                      color: Theme.of(context).colorScheme.secondary,
                      child: product.description != null
                          ? Html(data: product.description, style: {
                        'body': Style(
                          fontSize: FontSize(14.0),
                          color: Theme.of(context)
                              .colorScheme
                              .onSecondary,
                        ),
                      })
                          : const Center(
                        child: Text(
                          'Описание отсутствует',
                          style: TextStyle(fontSize: 14.0),
                        ),
                      )),
                  Container(
                    color: Theme.of(context).colorScheme.secondary,
                    child: const Center(
                      child: Text('В наличии'),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

原理说明 #

1. 外层的SingleChildScrollView已经负责整个页面的滚动，因此Tab区域不需要固定高度，完全可以由内部内容决定高度
2. DefaultTabController内部的Column设置了mainAxisSize: MainAxisSize.min，会自动根据子组件的总高度调整自身高度
3. 移除Expanded后，TabBarView会直接使用内部内容的高度，比如Html组件渲染的商品描述会自然撑开高度，实现自适应

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