如何让 GridView.builder 在颤动中占据屏幕的其余部分并滚动另外两个小部件

Question

我无法让 GridView.builder 同时滚动其上方的两个小部件。我只希望滚动时搜索栏保留在屏幕上。我成功破解它的唯一方法是使用 SizedBox，但我希望它能够填充它所在的任何移动设备。

如有任何帮助，我们将不胜感激。我已经用大写字母标记了我希望它从代码中滚动的点。

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

import '../widgets.dart/search_results_chip.dart';

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Column(
      children: [
        //search bar
        Row(
          children: [
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.arrow_back),
            ),
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                    isCollapsed: true,
                    prefixIcon: const Icon(Icons.category),
                    suffixIcon: const Icon(Icons.search),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30))),
              ),
            ),
            IconButton(
                onPressed: () {}, icon: const Icon(Icons.filter_alt_outlined))
          ],
        ),

        SizedBox(
          height: 6,
        ),

        //search results
        //SCROLL FROM HERE
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  height: 60,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: const [
                      SearchResultsChip(
                          title: 'Free Delivery', showDropDown: false),
                      SearchResultsChip(
                        title: 'Price',
                        showDropDown: true,
                      ),
                      SearchResultsChip(
                          title: 'Estimated Delivery', showDropDown: true)
                    ],
                  ),
                ),

                //sort by
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: Row(
                    children: [
                      Text(
                        'Relevance',
                        style: TextStyle(color: Colors.white),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.sort,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),

                //Search Results
                Expanded(
                  child: GridView.builder(
                      itemCount: 10,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2, crossAxisSpacing: 4),
                      itemBuilder: (context, index) {
                        return Column(
                          children: [
                            Expanded(
                              child: Container(
                                height: 150,
                                child: Image(
                                    height: 150,
                                    fit: BoxFit.cover,
                                    image: NetworkImage(
                                        'https://images.unsplash.com/photo-1633435597643-601bb3efc197?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGVwb3h5JTIwdGFibGV8ZW58MHx8MHx8fDA%3D')),
                              ),
                            )
                          ],
                        );
                      }),
                )
              ],
            ),
          ),
        )
      ],
    ));
  }
}

Answer 1

用

GridView.builder

代替

SizedBox

 包裹您的 

Expanded

 //Search Results
  SizedBox(
    child: GridView.builder(),
  ),

结果屏幕 -