应用程序的窗口小部件层次结构如下
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),
),
),
)
],
),
),
);
}
}