当我使用 SingleChildScrollView 和 GridView.builder 时遇到 renderflex 问题

Question

当我使用 Expanded 小部件和 GridView.builder 时，我在使用 SingleChildScrollView 时遇到了一些困难

我希望整个页面滚动到远离应用栏的位置，但是当我放入 SingleChildScrollView 时，我遇到了 RenderFlex 问题。

我该如何做到这一点，以便我可以滚动整个页面，而不仅仅是 GridView.builder()

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class Profile extends StatelessWidget {
  const Profile({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Profile page'),
          actions: [
            IconButton(onPressed: () {}, icon: Icon(Icons.notifications_active))
          ],
        ),
        //backgroundColor: Colors.black,
        drawer: Drawer(
          child: ListView(
            children: [DrawerHeader(child: Text('Menu'))],
          ),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                SizedBox(
                  height: 25,
                ),
                Center(
                  child: Column(
                    children: [
                      CircleAvatar(
                        radius: 50,
                        backgroundImage: NetworkImage(
                          'https://images.unsplash.com/photo-1702325384103-efcda48fa262?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cmFuZG9tJTIwcGVyc29ufGVufDB8fDB8fHww',
                        ),
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      Text(
                        "Moody Moo's",
                        style: TextStyle(fontSize: 30),
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      IntrinsicHeight(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text('3 scrapbooks'),
                            VerticalDivider(
                              color: Colors.black,
                            ),
                            Text('2 Projects'),
                            VerticalDivider(
                              color: Colors.black,
                            ),
                            Text('1 Event')
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 20,
                ),

                //scrapbook, project, event selection

                TabBar(tabs: [
                  Tab(
                    text: 'Scrapbooks',
                  ),
                  Tab(
                    text: 'Stuff',
                  ),
                  Tab(
                    text: 'More stuff',
                  )
                ]),

                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Row(
                    children: [
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            prefixIcon: Icon(Icons.search),
                            contentPadding: EdgeInsets.all(2),
                            // isCollapsed: true,
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(30),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Icon(Icons.sort_by_alpha),
                    ],
                  ),
                ),

                Expanded(
                  child: TabBarView(children: [
                    GridView.builder(
                      itemCount: 3,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          crossAxisSpacing: 4,
                          mainAxisSpacing: 4),
                      itemBuilder: (context, index) {
                        return Container(
                          decoration: BoxDecoration(
                            border: Border.all(color: Colors.black),
                          ),
                          child: Image(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                              'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHJhbmRvbSUyMHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D',
                            ),
                          ),
                        );
                      },
                    ),
                    Center(
                      child: Text('Stuff'),
                    ),
                    Center(
                      child: Text('More Stuff'),
                    )
                  ]),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

出现此问题是因为展开的高度可能会给出无限值，您可以使用 sliver 例如某些包作为 sliver 工具，或者查看本教程 如何使网格和列表一起滚动