Question

我正在尝试制作一个在移动设备和桌面设备上运行良好的响应式页面。我在 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。容器上的宽度？

请建议如何解决此问题。

谢谢

Sliver 不允许设置容器的最大宽度？

0 个答案: