Flutter-无法滚动内部具有GridView的CustomScrollview

时间:2019-09-21 08:37:04

标签: flutter flutter-layout

应用程序的窗口小部件层次结构如下

CustomScrollView
 |-SliverToBoxAdapter
  |-ContainerCardsWithTitle ----- (Custom Widget)
   |-ListView.Builder       ----- (Horizontal List) max child 5
 |-SliverToBoxAdapter
   |-ContainerCardsWithTitle ----- (Custom Widget)
    |-GridView.count       ----- (Vertical List) max child 5

现在的问题是,布局正按我的预期显示。但是存在一些滚动问题。

我可以按预期水平滚动第一个列表,也可以通过向上拖动水平列表来滚动整个页面。但是我无法对第二个自定义小部件中的gridview做同样的事情。

但是,如果我通过单击其封闭的小部件(ContainerCardsWithTitle)的填充部分来拖动布局,则可以滚动整个页面。

我想要的是能够通过拖动UI布局的任何部分来滚动整个页面。有可能还是有更好的方法来完成我所描述的内容??

这是代码

class HomeScreen extends StatelessWidget {
static const screenRoute = '/home_screen';

@override
Widget build(BuildContext context) {
return SafeArea(
  child: Scaffold(
    resizeToAvoidBottomInset: false,
    backgroundColor: AppColors.pageBackground,
    body: Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          SearchViewCard(),
          Expanded(
            child: CustomScrollView(
              slivers: <Widget>[
                SliverToBoxAdapter(
                  child: _buildContainerCardsWithTitle(
                    title: Resources.getString(AppStrings.recommendedBooks),
                    shouldShowSeeAll: true,
                    child: Container(
                      height: 200,
                      child: ListView.builder(
                        itemCount: 5,
                        itemBuilder: _buildRecommendedBooksCard,
                        scrollDirection: Axis.horizontal,
                      ),
                    ),
                  ),
                ),
                SliverToBoxAdapter(
                  child: _buildContainerCardsWithTitle(
                      title: Resources.getString(AppStrings.popularGenres),
                      child: GridView.count(
                        shrinkWrap: true,
                        crossAxisCount: 2,
                        children: List.generate(5, (index) {
                          return _buildGenreContainers();
                        }),
                      )),
                )
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);
}

Widget _buildRecommendedBooksCard(BuildContext context, int index) {
return Padding(
  padding: const EdgeInsets.all(8.0),
  child: InkWell(
    onTap: () {},
    child: Container(
      width: 180,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            offset: Offset(0.0, 1.0),
            blurRadius: 1.0,
            spreadRadius: 1.0,
          ),
        ],
        borderRadius: BorderRadius.all(
          Radius.circular(16),
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Image.asset(
            Resources.getImageResourcePath('ic_launcher.png'),
            height: 80.0,
            fit: BoxFit.cover,
          ),
          SizedBox(
            width: 16.0,
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'Book Title',
                    style: TextStyle(color: AppColors.primaryTextColor, fontSize: 14.0),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text(
                    'Author Name',
                    style: TextStyle(
                      color: AppColors.primaryTextColor,
                      fontSize: 12.0,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  Expanded(
                    child: Container(),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Text(
                      'Genre',
                      textAlign: TextAlign.right,
                      style: TextStyle(color: AppColors.primaryTextColor, fontSize: 10.0),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  ),
  );
  }

  Widget _buildContainerCardsWithTitle({String title, bool shouldShowSeeAll, Widget child}) {
return Card(
  elevation: 4,
  clipBehavior: Clip.antiAlias,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  child: Container(
    padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Row(
          children: <Widget>[
            Text(
              title,
              style: TextStyle(color: Colors.black, fontSize: 12),
            ),
            Expanded(child: Container()),
            InkWell(
              onTap: () {},
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  Resources.getString(AppStrings.seeAll),
                  style: TextStyle(fontSize: 10, color: AppColors.clickableTextColor),
                ),
              ),
            ),
          ],
        ),
        SizedBox(
          height: 8.0,
        ),
        /**
         * Show the child passed into this layout
         * */
        child,
      ],
    ),
  ),
);
}

Widget _buildGenreContainers() {
return Card(
  elevation: 8,
  clipBehavior: Clip.antiAlias,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  child: Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Container(
            child: Image.asset(
              Resources.getImageResourcePath('ic_launcher.png'),
            ),
          ),
        ),
        Container(
          height: 60,
          child: Center(
            child: Text(
              'Genre Name',
              style: TextStyle(fontSize: 16),
            ),
          ),
        )
      ],
    ),
  ),
);
}
}

0 个答案:

没有答案