[英]how to corner radius on SliverGrid / SliverList on Flutter
是否可以将borderRadius
为SliverList
/ SliverGrid
? 如果是,如何半径topRight
和topLeft
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
),
),
SliverGrid(
gridDelegate:
SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: Colors.teal[100 * (index % 9)],
alignment: Alignment.center,
child: Text('grid item $index'),
);
},
childCount: 120,
),
),
],
),
你可能无法做出SliverList四舍五入(甚至在某些部分),但你可以通过把列表的孩子在一列和包装列在一个容器,然后设置容器的borderRadius调整自己的方式。
并且 Scrolling 仍然可以像普通的CustomScrollView 一样完美地工作
整个想法是使Column为SliverList工作。 所以你必须将childCount设置为 1 并允许Column处理关于孩子的一切
您可以为 SliverGrid 尝试相同的方法
我用 SliverList 写了一个例子
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text("Hey"),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(_, __){
return Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))
),
child: Column(
children: List.generate(10, (index) => Container(child: ListTile(title: Text("$index nothing")))),
),
);
},
childCount: 1
),
)
],
),
);
}
}
我希望这可以帮助你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.