如何使用網格 Flutter 同時滾動小部件

Question

我如何同時滾動小部件

Flutter

截屏

圖片

這是此屏幕的代碼

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),
            //                       )),
            //           ));
            //     }
            //     ),
            //   ),
            // ),
          ],
        )));

當我現在開始滾動時，只有網格滾動但小部件不動，我希望當用戶開始滾動時這個小部件會上升。誰能告訴我問題出在哪里以及如何解決？

按照評論中的要求更新了完整的代碼。

Answer 1

首先， Column是不可滾動的，因此要使小部件可滾動是用ListView而不是Column包裝這些小部件。 所以你可以做這樣的事情來使小部件可滾動：

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

如果ListView使小部件可滾動，當ListView包裝在另一個ListView中時會發生什么？ 可滾動內的可滾動？ （嗯，有些情況下你想這樣做，但這里不是這樣，所以是的）。 會有錯誤。

所以為了避免錯誤，只需添加shrinkWrap: true和physics: ClampingScrollPhysics()你就可以使用go，如下所示：

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
        ...
      ),
    ],
  ),
),