如何解决Sliver 不允许设置容器的最大宽度?
我正在尝试制作一个在移动设备和桌面设备上运行良好的响应式页面。我在 nestedScrollView 中使用 SliverAppBar。问题是在 nestedScrollView 中完全忽略了容器的最大宽度约束。此行为也与 CustomScrollView 相同。
如何在 nestedScrollView body 小部件中限制 Container 的大小。
代码如下:
import "dart:math";
import "package:Flutter/material.dart";
class ResponsiveSliver extends StatefulWidget {
static const routeName = 'responsive-sliver';
@override
_ResponsiveSliverState createState() => _ResponsiveSliverState();
}
class _ResponsiveSliverState extends State<ResponsiveSliver> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
body: nestedScrollView(
floatHeaderSlivers: true,headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text(
"Responsive Sliver",),centerTitle: true,pinned: true,floating: true,];
},body: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 200),child: Container(
child: ListView.separated(
separatorBuilder: (context,child) => Divider(
height: 1,padding: EdgeInsets.all(0.0),itemCount: 10,itemBuilder: (context,i) {
return Container(
constraints: BoxConstraints(maxWidth: 200),height: 100,// width: double.infinity,color: Colors.primaries[Random().nextInt(Colors.primaries.length)],);
},);
}
}
在我上面的代码中,您可以注意到正在使用 maxWidth 约束,
ConstrainedBox( constraints: BoxConstraints(maxWidth: 200),child: ())
和
Container( constraints: BoxConstraints(maxWidth: 200),child: (),)
但是这些 maxWidth 约束被完全忽略,它占用了可用屏幕的整个宽度。
我想让 nestedScrollView 全屏宽度,从而使 SliverAppbar 覆盖整个屏幕宽度。
到目前为止,我了解约束采用基于其父级大小的宽度。在这种情况下,父 nestedScrollView 占用全屏宽度,因此忽略了 ConstrainedBox maxWidth 属性。
那么如何使 SliverAppBar 的大小为全宽,并且仍然设置 Max。容器上的宽度?
请建议如何解决此问题。
谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。