2

我正在尝试制作一个在移动设备和桌面设备上运行良好的响应式页面。我在 NestedScrollView 中使用 SliverAppBar。问题是在 NestedScrollView 中完全忽略了容器的 maxwidth 约束。此行为也与 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。容器的宽度？

请建议如何解决这个问题。

谢谢

4

0 回答 0