flutter - CustomScrollView 中的颤振中心小部件
问题描述
如何在自定义子滚动视图 silverlist 中居中元素?
return CustomScrollView(
physics: BouncingScrollPhysics(),
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
SizedBox(height: widget.height),
HeaderTitle("Hello there"),
(data.length == 0)
? Center(
child: Container(
// padding: EdgeInsets.fromLTRB(0, 150, 0, 0),
child: Column(
children: [
Text("No Data Yet"),
OutlineButton(
onPressed: () {
Navigator.of(context).pop();
},
textColor: Colors.black,
child: Text("Do Something"),
),
],
),
),
)
: Container()
])),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 10.0 / 10.0,
crossAxisCount: 2,
),
delegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return CastCard(data[index], null);
}, childCount: data.length),
),
],
);
我试图用 Center 和 Column 用 center 属性换行,但文本 No Date 尚未定位在屏幕的中心(剩余空间可用)
解决方案
您可以使用SliverToBoxAdapter
将自定义小部件放入CustomScrollView
其中,然后将Center
小部件放入其中。例如 :
class MenuView extends StatelessWidget {
double _kMaxCrossAxisExtent = 100;
double _kMainAxisSpacing=10;
double _kChildAspectRatio = 1;
double _kCrossAxisSpacing = 10;
final double _kSliverPadding = 8;
double _kExpandedHeight = 250;
double _kCollapsedHeight =250;
@override
Widget build(BuildContext context) {
return CustomScrollView(
physics: BouncingScrollPhysics(),
slivers: [
SliverAppBar(
expandedHeight: _kExpandedHeight,
collapsedHeight: _kCollapsedHeight,
flexibleSpace: Placeholder(
fallbackHeight: 800,
),
elevation: 10,
actions: [
IconButton(
icon: Icon(Icons.menu),
onPressed: null,
)
],
),
SliverToBoxAdapter(
child:Center(child:Padding(
padding: const EdgeInsets.symmetric(vertical: 80),
child: Text('This is a centered Text'),
))
),
SliverPadding(
padding: /*const*/ EdgeInsets.all(_kSliverPadding),
sliver: SliverGrid.extent(
maxCrossAxisExtent: _kMaxCrossAxisExtent,
mainAxisSpacing: _kMainAxisSpacing,
crossAxisSpacing: _kCrossAxisSpacing,
childAspectRatio: _kChildAspectRatio,
children: [
for (int i = 0; i <= 10; i++)
Placeholder(
fallbackWidth: 200,
fallbackHeight: 200,
)
],
),
),
],
);
}
}
这会产生以下结果:
或者您可以使用SliverFillRemaining
来填充 的剩余空间CustomScrollView
,如下所示:
class MenuView extends StatelessWidget {
double _kMaxCrossAxisExtent = 100;
double _kMainAxisSpacing=10;
double _kChildAspectRatio = 1;
double _kCrossAxisSpacing = 10;
final double _kSliverPadding = 8;
double _kExpandedHeight = 250;
double _kCollapsedHeight =250;
@override
Widget build(BuildContext context) {
return CustomScrollView(
physics: BouncingScrollPhysics(), //The bouncing could be removed
slivers: [
SliverAppBar(
expandedHeight: _kExpandedHeight,
collapsedHeight: _kCollapsedHeight,
flexibleSpace: Placeholder(
fallbackHeight: 800,
),
elevation: 10,
actions: [
IconButton(
icon: Icon(Icons.menu),
onPressed: null,
)
],
),
SliverFillRemaining(
child:Center(child:Padding(
padding: const EdgeInsets.symmetric(vertical: 80),
child: Text('This is a centered Text'),
))
),
],
);
}
}
结果是(可以删除一些很棒的弹跳):
推荐阅读
- java - 在 BST 中查找数组元素的级别
- reactjs - 默认情况下,在生产中反应原生删除 PropTypes 吗?
- google-maps - Flutter Google Map 在 IOS 中首次打开时崩溃
- python - 知道如何在 python 中修复此错误“TypeError: unsupported operand type(s) for -: 'list' and 'list'”吗?
- python - django.core.exceptions.ImproperlyConfigured: 。您必须定义环境变量 DJANGO_SETTINGS_MODULE
- python - 需要一个正则表达式来捕获python文件中的所有输入函数
- hlsl - 着色语言中内置函数的精度是多少?
- javascript - 如何调整网站“横幅”的大小以适应不同大小的窗口?
- c# - WasapiLoopbackCapture 内部音频识别在没有音频时会产生乱码和文本
- notifications - Exchange Web 服务:重新连接流时,流通知消息是否会丢失?