如何使用sliver:[]
得到类似于example的水平网格视图。我试过使用here的例子,但是它使用了多个子容器来得到想要的结果。我也试过把它交给list。generate,但是好像不起作用,或者我真的不知道如何使用它。
注意:我有其他多滚动列表太内[ ]
下面是我所做的工作,但它出来的列表:
body: CustomScrollView(
slivers: [
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
crossAxisCount: 2,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int i) {
return InkWell(
onTap: () {},
child: ClipRRect(
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(8),
child: Container(
height: 200,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image:
CachedNetworkImageProvider('categoryImage'),
fit: BoxFit.cover,
onError: (exception, stackTrace) =>
LoadingImage(),
),
gradient: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0x1FFFFFFF),
Color(0x463B3B3B),
],
),
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey.shade900,
offset: const Offset(1, 1),
spreadRadius: 1,
blurRadius: 50,
blurStyle: BlurStyle.outer),
]),
child: Container(
padding: const EdgeInsets.all(10),
height: 100,
color: Colors.transparent,
alignment: Alignment.bottomLeft,
width: double.infinity,
child: Text(
"title",
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyText1!,
),
),
),
),
);
},
childCount: count.length,
),
),
),
],
)
1条答案
按热度按时间shyt4zoc1#
只是添加
scrollDirection: Axis.horizontal,
内CustomScrollView
,只是改变我的图像与您的希望它的帮助你完整小部件:
结果图像-〉x1c 0d1x