Flutter中TabBarView出现RenderBox未布局错误的解决咨询

尝试用Expanded让TabBarView占据屏幕可用区域时，出现如下错误：

RenderBox was not laid out: RenderFlex#dc538 relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
报错来自package:flutter/src/rendering/box.dart第1966行第12位的断言失败：'hasSize'

试过用Flexible和FlexFit.loose，但没有效果，需要实现TabBarView占满剩余屏幕空间的需求。

问题核心是父容器无法给TabBarView提供明确的尺寸约束：原代码用ListView包裹整个内容，ListView是滚动容器，内部的Flexible/Expanded无法获取确定的可用空间；同时子页面嵌套Scaffold也会导致布局冲突。按以下步骤修改：

1. 修改ProfileScreen的布局结构 #

把body中的ListView替换为Column，配合Expanded分配剩余空间给ChoiceContent，顶部用户信息用SingleChildScrollView包裹避免小屏幕溢出：

// ... 保留原有导入和类定义
@override
Widget build(BuildContext context) {
  final theme = Theme.of(context).textTheme;
  double wh = MediaQuery.of(context).size.width;
  double hh = MediaQuery.of(context).size.height;

  return SafeArea(
    child: _user == null
        ? const Center(
            child: CircularProgressIndicator(
              color: Colors.white,
            ),
          )
        : Scaffold(
            key: _scaffoldKey,
            appBar: AppBar(
              title: const Text('username'),
              actions: [
                IconButton(onPressed: () {}, icon: const Icon(Icons.add_sharp)),
                IconButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => const WalletScreen()),
                    );
                  },
                  icon: const Icon(Icons.account_balance_wallet),
                ),
                IconButton(
                  onPressed: () => _scaffoldKey.currentState!.openEndDrawer(),
                  icon: const Icon(Icons.menu),
                ),
              ],
            ),
            body: Padding(
              padding: EdgeInsets.symmetric(horizontal: wh * 0.04, vertical: hh * 0.02),
              // 替换ListView为Column，配合Expanded分配空间
              child: Column(
                children: <Widget>[
                  // 顶部用户信息用横向滚动组件包裹，防止小屏幕溢出
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: FutureBuilder(
                        future: _loadUser(),
                        builder: (context, snapshot) {
                          return Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              UserImage(imageUrl: snapshot.data?.avatarUrl ?? ''),
                              SizedBox(width: wh * 0.20),
                              DescriptionsForProfile(
                                name: snapshot.data?.name ?? '',
                                phone: snapshot.data?.phone ?? '',
                                description: snapshot.data?.description ?? '',
                                mail: snapshot.data?.mail ?? '',
                              ),
                            ],
                          );
                        }),
                  ),
                  const SizedBox(height: 30),
                  // 用Expanded让ChoiceContent占据剩余屏幕空间
                  Expanded(child: ChoiceContent(controller: _tabController)),
                ],
              ),
            ),
            endDrawer: SideBar(theme: theme, authBloc: _authBloc)),
  );
}

2. 修改ChoiceContent组件 #

移除Column的mainAxisSize: MainAxisSize.min，并用Expanded替代Flexible，确保TabBarView获取足够空间：

import 'package:flutter/material.dart';
import 'package:resourse_app/features/profile/widget/paid_content.dart';
import 'free_content.dart';

class ChoiceContent extends StatelessWidget {
  final TabController controller;
  const ChoiceContent({Key? key, required this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double wh = MediaQuery.of(context).size.width;

    return Column(
      // 移除mainAxisSize: MainAxisSize.min，让Column占满父组件空间
      children: <Widget>[
        Container(
          width: wh,
          height: 40,
          child: TabBar(
            controller: controller,
            tabs: const [
              Tab(text: 'Платный контент'),
              Tab(text: 'Бесплатный контент'),
            ],
          ),
        ),
        // 用Expanded确保TabBarView占满剩余空间
        Expanded(
          child: TabBarView(
            controller: controller,
            children: const [
              PaidContent(),
              FreeContent(),
            ],
          ),
        )
      ],
    );
  }
}

3. 修复子页面的嵌套问题 #

移除FreeContent和PaidContent中的Scaffold（父组件已有Scaffold，嵌套会导致布局冲突），同时修正paid_content.dart的类名错误：

free_content.dart #

import 'package:flutter/material.dart';

class FreeContent extends StatelessWidget {
  const FreeContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Бесплатный контент'));
  }
}

paid_content.dart #

import 'package:flutter/material.dart';

// 修正类名从FreeContent改为PaidContent
class PaidContent extends StatelessWidget {
  const PaidContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('Платный контент'));
  }
}

关键说明 #

• ListView作为滚动容器无法给内部的Expanded提供确定尺寸，换成Column+Expanded可以明确分配空间
• 顶部用户信息用SingleChildScrollView包裹，避免小屏幕下横向内容溢出
• 子页面移除Scaffold，避免嵌套布局导致的约束冲突
• 修正paid_content.dart的类名错误，确保组件正常引用

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