Flutter使用GridView时屏幕顶部出现阴影的解决方法咨询

问题说明 #

我编写的Flutter页面代码如下，遇到两个滚动相关的问题：

• 移除Body内首个Expanded子组件外层的SingleChildScrollView后，滚动GridView时屏幕顶部会出现阴影
• 若保留SingleChildScrollView并给GridView包裹固定高度的Container，子组件会被截断、无法完全显示

原代码 #

Scaffold(
  appBar: AppBar(
    elevation: 0,
    toolbarHeight: 0,
  ),
  body: LayoutBuilder(
    builder: (context, constraints) {
      return Column(
        children: [
          Expanded(
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  child: Row(
                    mainAxisAlignment:
                        MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        "Let's Discover",
                        style: TextStyle(
                            fontSize: 24,
                            fontWeight: FontWeight.w800),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: Image.asset(
                          'assets/images/avatar.png',
                          fit: BoxFit.cover,
                          height: 45,
                          width: 45,
                        ),
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  height: 45,
                ),
                Container(
                  width: double.infinity,
                  padding: EdgeInsets.symmetric(
                      horizontal: 10, vertical: 10),
                  margin: EdgeInsets.symmetric(horizontal: 20),
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(35),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment:
                        MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        padding:
                            EdgeInsets.symmetric(horizontal: 10),
                        child: Icon(
                          Icons.search,
                          size: 26,
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: EdgeInsetsDirectional.fromSTEB(
                              8, 0, 8, 0),
                          child: TextFormField(
                            autofocus: true,
                            obscureText: false,
                            decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: 'Search destination'),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  height: 30,
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  child: Row(
                    mainAxisAlignment:
                        MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Categories'),
                      InkWell(
                        onTap: () {},
                        focusColor: Colors.grey,
                        child: Text(
                          'View All',
                          style:
                              TextStyle(color: AppColors.mainText),
                        ),
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                Container(
                  height: 100,
                  margin: EdgeInsets.symmetric(horizontal: 20),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(35.0)),
                  child: ListView.builder(
                    itemCount: successState.photoDestination.length,
                    scrollDirection: Axis.horizontal,
                    physics: const BouncingScrollPhysics(),
                    itemBuilder: (context, index) {
                      final item =
                          successState.photoDestination[index];
                      return const Categories();
                    },
                  ),
                ),
                const SizedBox(
                  height: 40,
                ),
                Container(
                  decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: BorderRadius.circular(30)),
                  padding: EdgeInsets.symmetric(
                      horizontal: 20, vertical: 10),
                  margin: EdgeInsets.symmetric(horizontal: 20),
                  child: Row(
                    mainAxisAlignment:
                        MainAxisAlignment.spaceBetween,
                    children: List.generate(
                      sortable.length,
                      (index) => AnimatedSwitcher(
                        duration: Duration(milliseconds: 700),
                        switchInCurve: Curves.easeIn,
                        switchOutCurve: Curves.easeOut,
                        transitionBuilder: (child, animation) {
                          return FadeTransition(
                            opacity: animation,
                            child: child,
                          );
                        },
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              _sortable = sortable[index];
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                                color: sortable[index] == _sortable
                                    ? Colors.white
                                    : Colors.transparent,
                                borderRadius:
                                    BorderRadius.circular(20),
                                boxShadow: sortable[index] ==
                                        _sortable
                                    ? [
                                        BoxShadow(
                                          blurRadius: 5.0,
                                          color: Color.fromARGB(
                                              199, 228, 226, 226),
                                          spreadRadius: 5,
                                        )
                                      ]
                                    : []),
                            child: Center(
                              child: Text(
                                sortable[index],
                                style: TextStyle(
                                  color:
                                      sortable[index] == _sortable
                                          ? Colors.orange
                                          : Colors.grey,
                                  fontWeight:
                                      sortable[index] == _sortable
                                          ? FontWeight.bold
                                          : FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 30,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 20),
                    child: GridView.count(
                      crossAxisCount: 2,
                      shrinkWrap: true,
                      children: List.generate(
                          OfflineData.destinationList.length,
                          (index) {
                        var item =
                            OfflineData.destinationList[index];
                        return Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage(item["image"]),
                            ),
                          ),
                        );
                      }),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      );
    },
  ),
)

解决方案 #

针对问题1：移除滚动顶部阴影 #

阴影是GridView默认的过滚动（overscroll）效果，直接修改GridView的物理滚动属性即可解决：
在GridView.count中添加：

physics: const ClampingScrollPhysics(),

如果需要全局禁用过滚动效果，可以在MaterialApp中配置：

scrollBehavior: const ScrollBehavior().copyWith(overscroll: false),

针对问题2：让SingleChildScrollView与GridView共存且不截断 #

不要给GridView设置固定高度，而是通过以下步骤让它自适应内容，同时把滚动权限交给外层的SingleChildScrollView：

1. 给GridView添加physics: const NeverScrollableScrollPhysics()，禁用自身滚动
2. 保留shrinkWrap: true，让GridView根据子组件数量计算自身高度
3. 外层Column设置mainAxisSize: MainAxisSize.min，确保Column不会强制占满屏幕高度

修改后的核心代码片段：

body: SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      // 顶部的搜索栏、分类列表、排序按钮等组件...
      const SizedBox(height: 30),
      // GridView部分
      Container(
        margin: EdgeInsets.symmetric(horizontal: 20),
        child: GridView.count(
          crossAxisCount: 2,
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          children: List.generate(
              OfflineData.destinationList.length,
              (index) {
            var item = OfflineData.destinationList[index];
            return Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(item["image"]),
                ),
              ),
            );
          }),
        ),
      ),
    ],
  ),
)

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