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

Question

我正在尝试制作一个在移动设备和桌面设备上运行良好的响应式页面。我在 NestedScrollView 中使用 SliverAppBar。问题是 NestedScrollView 中完全忽略了对容器的 maxwidth 约束。此行为也与 CustomScrollView 相同。

如何限制 NestedScrollView 主体小部件中容器的大小。

下面是代码：

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。集装箱的宽度？

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

谢谢

Answer 1

我通过使用 padding 而不是 BoxConstraint 解决了这个问题。

import 'dart:math';
import 'package:flutter/material.dart';

class ConstrainedSliverWidth extends StatelessWidget {
  final Widget child;
  final double maxWidth;
  const ConstrainedSliverWidth({
    Key? key,
    required this.child,
    required this.maxWidth,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    var padding = (size.width - maxWidth) / 2;
    return Padding(
      padding:
          EdgeInsets.symmetric(horizontal: max(padding, 0)),
      child: child,
    );
  }
}

如果你替换ConstrainedBox它ConstrainedSliverWidth应该可以工作。