如何使用网格 Flutter 同时滚动小部件

Question

How I can scroll widget in same time

Flutter

Screenshot

Image

Here is code for this screen

return Scaffold(
    appBar: CustomAppBar(
      scaffoldKey: widget.scaffoldKey,
      // icon: AppIcon.settings,
      // onActionPressed: onSettingIconPressed,
      onSearchChanged: (text) {
        setState(() {
          if (text.length > 0) {
            searching = true;
          } else {
            searching = false;
          }
        });

        state.filterByUsername(text);
      },
    ),
    backgroundColor: Colors.white,
    body: new RefreshIndicator(
        backgroundColor: Colors.white,
        onRefresh: () async {
          HapticFeedback.selectionClick();
          setState(() {
            list3 = state2.getPostList(authstate.userModel);
            list3.shuffle();
            onlyImages.shuffle();
          });
          state.getDataFromDatabase();
          return Future.value(true);
        },

        // mesto povise greed, i ispod search boxa

        child: new Column(
          children: <Widget>[
            searching
                ? ListView.separated(
                    addAutomaticKeepAlives: false,
                    physics: BouncingScrollPhysics(),
                    itemBuilder: (context, index) =>
                        _UserTile(user: list[index]),
                    separatorBuilder: (_, index) => Divider(
                      color: Colors.orange,
                      height: 0,
                    ),
                    itemCount: list?.length ?? 0,
                  )
                : slider(),
            searching
                ? ListView.separated(
                    addAutomaticKeepAlives: false,
                    physics: BouncingScrollPhysics(),
                    itemBuilder: (context, index) =>
                        _UserTile(user: list[index]),
                    separatorBuilder: (_, index) => Divider(
                      color: Colors.orange,
                      height: 0,
                    ),
                    itemCount: list?.length ?? 0,
                  )
                : Container(
                    height: 32,
                    margin: EdgeInsets.only(top: 5, bottom: 5),
                    child: ListView(
                        scrollDirection: Axis.horizontal,
                        children: <Widget>[
                          _tagItem(Icon(Icons.dehaze, color: Colors.orange),
                              'DAJGI', null, Colors.black, () {
                            Navigator.pushNamed(
                                context, '/PhoneConfirmCode');
                          }),
                          _tagItem(null, 'Nature', null,
                              Colors.greenAccent.withOpacity(0.3), null),
                          _tagItem(
                              null, 'Animal', null, Colors.brown, null),
                          _tagItem(null, 'Travel', null, Colors.teal, null),
                          _tagItem(
                              null, 'Happy', null, Colors.orange, null),
                          _tagItem(null, 'Art', null, Colors.blue, null),
                          _tagItem(
                              null, 'Night', null, Colors.blueGrey, null),
                        ]),
                  ),

            // Grid List
            _listOfPosts(),

            // Expanded(
            //   child: GridView.count(
            //     crossAxisCount: 3,
            //     children: List.generate(onlyImages.length, (index) {
            //       return GestureDetector(
            //           onTap: () {
            //             FeedModel model = onlyImages[index];
            //             onPostPressed(context, model);
            //           },
            //           // onLongPress: () {
            //           //   _createPopupContext;
            //           //   FeedModel model = onlyImages[index];
            //           //   onPostPressed(context, model);
            //           // },
            //           child: Container(
            //             child: Card(
            //                 child: onlyImages
            //                             .elementAt(index)
            //                             .imagesPath
            //                             .length >
            //                         0
            //                     ? CachedNetworkImage(
            //                         imageUrl: onlyImages
            //                             .elementAt(index)
            //                             .imagesPath[0],
            //                         fit: BoxFit.cover,
            //                       )
            //                     :
            //                     // Container()
            //                     Center(
            //                         child: Text(onlyImages
            //                             .elementAt(index)
            //                             .description),
            //                       )),
            //           ));
            //     }
            //     ),
            //   ),
            // ),
          ],
        )));

When I starting to scroll now only grid scrolling but widget not moving, and I want that this widget going up when user starting to scroll.. Can anyone tell me what's the problem and how to fix it?

Updated the full code as requested in the comments.

Answer 1

First of all, Column is un-scrollable, so to make widgets scrollable is to wrap those widgets with a ListView instead of a Column . So you can do something like this to make widgets scrollable:

RefreshIndicator(
    backgroundColor: Colors.white,
    onRefresh: (_){},
    child: new ListView(
      children: <Widget>[
        // widget 1,
        // widget 2,
        // widget 3,
      ],
),

If ListView make widgets scrollable, what happens when a ListView is wrap in another ListView ? A scrollable inside a scrollable? (Well there are some cases when you want to do this, but thats not the case here so yeah). There will be error.

So to avoid the error, just add shrinkWrap: true and physics: ClampingScrollPhysics() and you're good to go, as such:

RefreshIndicator(
  backgroundColor: Colors.white,
  onRefresh: (_){},
  child: new ListView(
    children: <Widget>[
      // listview
      ListView.separated(
        shrinkWrap: true,                 // <--- add this
        physics: ClampingScrollPhysics(), // <--- and this
        ...
      ),
      // gridview
      GridView.builder(
        shrinkWrap: true,                 // <--- add this
        physics: ClampingScrollPhysics(), // <--- and this
        ...
      ),
    ],
  ),
),