flutter布局问题，TabBarView中嵌套GridView，高度可以自适合吗？

Question

代码：

SingleChildScrollView(
              child: Column(
                  children: [
                    Container(...),
                    DefaultTabController(
                      length: 3,
                      child: Column(
                        children: [
                          TabBar(
                            tabs: const [
                              Tab(text: 'Images'),
                              Tab(text: 'Likes'),
                              Tab(text: 'Collections'),
                            ],
                          ),
                          TabBarView(
                              children: [
                                GridView.builder(
                                  shrinkWrap: true,
                                  physics: const NeverScrollableScrollPhysics(),
                                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                    mainAxisSpacing: 4,
                                    crossAxisSpacing: 4,
                                    crossAxisCount: 2,
                                  ),
                                  padding: const EdgeInsets.all(4),
                                  itemCount: _publicImagesResult["content"]?.length,
                                  itemBuilder: (context, index) {
                                    return buildImagesCard(context, index);
                                  },
                                ),
                                Center(child: Text('Content of Tab 2')),
                                Center(child: Text('Content of Tab 3')),
                              ],
                          ),
                        ],
                      ),
                    )
                  ]
              ),
            )

老是报错：TabBarView高度未定义，求解

Answer 1

Colum布局的时候给到子组件的约束是无穷大，Column嵌套就Column就会出现这种情况；使用Expaned先让布局已经确定高度组件，然后让Column占用剩下的高度
这是一种

  Widget build(BuildContext context) {
    return Material(
      child: DefaultTabController(
        length: 3,
        child: Column(
          children: [
            SafeArea(
              top: true,
              child: Container(
                padding: const EdgeInsets.symmetric(vertical: 10),
                alignment: Alignment.center,
                color: Colors.blue,
                child: const Text('Top'),
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  const TabBar(
                    tabs: [
                      Tab(text: 'Images'),
                      Tab(text: 'Likes'),
                      Tab(text: 'Collections'),
                    ],
                  ),
                  Expanded(
                    child: TabBarView(
                      children: [
                        GridView.builder(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          gridDelegate:
                              const SliverGridDelegateWithFixedCrossAxisCount(
                            mainAxisSpacing: 4,
                            crossAxisSpacing: 4,
                            crossAxisCount: 2,
                          ),
                          padding: const EdgeInsets.all(4),
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Container(
                              // height: 30,
                              // width: double.infinity,
                              color: Colors.pink,
                            );
                          },
                        ),
                        Center(child: Text('Content of Tab 2')),
                        Center(child: Text('Content of Tab 3')),
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

看你代码意图，下面官网的例子会更符合你需求：
https://api.flutter.dev/flutter/widgets/NestedScrollView-clas...

Answer 2

SingleChildScrollView(
  child: Column(
    children: [
      Container(...),
      DefaultTabController(
        length: 3,
        child: Column(
          children: [
            TabBar(
              tabs: const [
                Tab(text: 'Images'),
                Tab(text: 'Likes'),
                Tab(text: 'Collections'),
              ],
            ),
            // 添加一个固定高度的Container包裹TabBarView
            Container(
              height: 500, // 设置一个固定高度，根据需要调整
              child: TabBarView(
                children: [
                  GridView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      mainAxisSpacing: 4,
                      crossAxisSpacing: 4,
                      crossAxisCount: 2,
                    ),
                    padding: const EdgeInsets.all(4),
                    itemCount: _publicImagesResult["content"]?.length,
                    itemBuilder: (context, index) {
                      return buildImagesCard(context, index);
                    },
                  ),
                  Center(child: Text('Content of Tab 2')),
                  Center(child: Text('Content of Tab 3')),
                ],
              ),
            ),
          ],
        ),
      )
    ]
  ),
)