Flutter报错RenderFlex子项含非零flex但高度约束无界问题求助

触发的渲染错误：

The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

尝试将GridView放入固定高度的Container后错误消失，但GridView内容被截断，相关代码如下：

SingleChildScrollView组件代码 #

import ...

class CommunityPage extends StatefulWidget {...}

class _CommunityPageState extends State<CommunityPage> {
  ScrollController? sc;
  bool check = false;

  Future<void> _copyToClipboard() async {...}

  @override
  void initState() {...}

  @override
  void dispose() {...}

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          elevation: 0.0,
        ),
        drawer: const SideBar(),
        floatingActionButton: check
            ? FloatingActionButton.small(...)
            : null,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        body: SafeArea(
          child: ((this.sc == null) && !this.sc!.hasClients)
              ? const Center(...)
              : SingleChildScrollView(
                  controller: this.sc!,
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    child: Column(
                      children: [
                        Container(...),
                        const SizedBox(height: largeSpace * 0.8),
                        Row(...),
                        const SizedBox(height: 20),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 65.0),
                          child: Container(
                            height: 43,
                            decoration: BoxDecoration(...),
                            child: Padding(
                              padding: const EdgeInsets.all(2.0),
                              child: TabBar(
                                indicator: BoxDecoration(),
                                labelColor: Colors.white,
                                unselectedLabelColor: Colors.black,
                                tabs: const [
                                  Tab(
                                    child: Text(
                                      'EVENTS',
                                      style: TextStyle(
                                        fontSize: 15,
                                        fontFamily: 'assets/fonts/LeferiBase',
                                      ),
                                    ),
                                  ),
                                  Tab(
                                    child: Text(
                                      'MEMBERS',
                                      style: TextStyle(
                                        fontSize: 15,
                                        fontFamily: 'assets/fonts/LeferiBase',
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(height: 20),
                        const Expanded(
                          child: TabBarView(children: [
                            EventsScreen(),
                            MembersScreen(),
                          ]),
                        ),
                      ],
                    ),
                  ),
                ),
        ),
      ),
    );
  }
}

GridView代码 #

import ...

class EventsScreen extends StatefulWidget {
  const EventsScreen({super.key});

  @override
  _EventsScreenState createState() {
    return _EventsScreenState();
  }
}

class _EventsScreenState extends State<EventsScreen> {
  List<Nfts> nfts = [];
  bool isLoading = true;
  NftsProviders nftsProvider = NftsProviders();

  Future initNfts() async {
    nfts = await nftsProvider.getNfts();
  }

  @override
  void initState() {
    super.initState();
    initNfts().then((_) {
      setState(() {
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return isLoading
        ? const Center(
            child: CircularProgressIndicator(),
          )
        : Padding(
            padding: const EdgeInsets.symmetric(horizontal: 40),
            child: GridView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: nfts.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3),
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(5.0),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const NFTDetailPage()),
                      );
                    },
                    child: CircleAvatar(
                      radius: 30,
                      backgroundImage: NetworkImage(nfts[index].meta_image),
                    ),
                  ),
                );
              },
            ),
          );
  }
}

解决方案 #

错误原因分析 #

1. Expanded与SingleChildScrollView冲突：SingleChildScrollView会给子级提供无限高度约束，而Expanded需要父级有有限高度才能分配剩余空间，两者矛盾导致报错。
2. TabBarView的滚动逻辑冲突：默认TabBarView自带滚动，和外层SingleChildScrollView的滚动叠加会导致布局异常。

修改步骤 #

1. 移除Column中的Expanded组件，外层是可滚动容器，不需要用Expanded抢占空间。
2. 给TabBarView添加shrinkWrap: true，让它自适应子内容高度。
3. 给TabBarView设置physics: NeverScrollableScrollPhysics()，禁用自身滚动，统一依赖外层SingleChildScrollView滚动。
4. 保持GridView的shrinkWrap: true和physics: NeverScrollableScrollPhysics()设置，确保它完全融入外层滚动体系。

修改后的关键代码 #

CommunityPage中TabBarView部分修改

// 替换原来的Expanded包裹的TabBarView
TabBarView(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  children: const [
    EventsScreen(),
    MembersScreen(),
  ],
),

完整修改后的CommunityPage build方法片段

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        elevation: 0.0,
      ),
      drawer: const SideBar(),
      floatingActionButton: check
          ? FloatingActionButton.small(...)
          : null,
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      body: SafeArea(
        child: ((this.sc == null) && !this.sc!.hasClients)
            ? const Center(...)
            : SingleChildScrollView(
                controller: this.sc!,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Column(
                    children: [
                      Container(...),
                      const SizedBox(height: largeSpace * 0.8),
                      Row(...),
                      const SizedBox(height: 20),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 65.0),
                        child: Container(
                          height: 43,
                          decoration: BoxDecoration(...),
                          child: Padding(
                            padding: const EdgeInsets.all(2.0),
                            child: TabBar(
                              indicator: BoxDecoration(),
                              labelColor: Colors.white,
                              unselectedLabelColor: Colors.black,
                              tabs: const [
                                Tab(
                                  child: Text(
                                    'EVENTS',
                                    style: TextStyle(
                                      fontSize: 15,
                                      fontFamily: 'assets/fonts/LeferiBase',
                                    ),
                                  ),
                                ),
                                Tab(
                                  child: Text(
                                    'MEMBERS',
                                    style: TextStyle(
                                      fontSize: 15,
                                      fontFamily: 'assets/fonts/LeferiBase',
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(height: 20),
                      // 修改后的TabBarView
                      TabBarView(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        children: const [
                          EventsScreen(),
                          MembersScreen(),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
      ),
    ),
  );
}

说明 #

• 移除Expanded后，Column会根据子元素实际高度布局，配合SingleChildScrollView实现整体滚动。
• TabBarView设置shrinkWrap: true后自适应子内容高度，禁用自身滚动后，切换Tab时内容会跟随外层滚动，避免嵌套滚动冲突。
• GridView的设置保持不变，确保它不会独立滚动，内容也不会被截断。

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