NestedScrollView 内部不考虑正文大小和边距

Question

我试图理解为什么在这种情况下的代码下面的“容器”作为示例，填充整个 space，即使有约束或大小。

return Scaffold(
      
      body: SafeArea(
        child: NestedScrollView(
          physics: BouncingScrollPhysics(),
          headerSliverBuilder: (context, innerBoxIsScrolled) {
            return <Widget>[];
          },
          body: Container(
            constraints: BoxConstraints(
              maxHeight: 100,
              minWidth: 100,
            ),
            color: Colors.red,
            height: 100,
            width: 100,
            child: Container(
              constraints: BoxConstraints(
                maxHeight: 50,
                minWidth: 50,
              ),
              color: Colors.yellow,
              height: 50,
              width: 50,
              child: Text('a'),
            ),
          ),
        ),
      ),
    );

Answer 1

您可以在整个页面上添加一个 Column 来控制每个 Container

的大小

你可以试试这个：

 return Scaffold(

  body: SafeArea(
    child: NestedScrollView(
      physics: BouncingScrollPhysics(),
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return <Widget>[];
      },
      body: Column(
        children: [
          Container(

            color: Colors.red,
            height: 100,
            width: 100,
            child: Container(
              
              margin: EdgeInsets.all(25.0),
              color: Colors.yellow,
              height: 50,
              width: 50,
              child: Text('a'),
            ),
          ),
        ],
      ),
    ),
  ),
);

Answer 2

如果子项想要与其父项不同的尺码，而父项没有足够的信息来对齐它，那么子项的尺码可能会被忽略。定义对齐方式时要具体。

此处您有第一个容器想要其大小，但它们被忽略了，因为屏幕强制它的大小与屏幕完全相同减去您可能传递给 headerSliverBuilder 的 SliverAppBars。

为了Container保持其大小，设置父级，它有自己的约束，例如Center、Column、Stack 等

Answer 3

将 NestedScrollView 更改为 CustomScrollView，并将您的 Widget 列表移至 slivers 属性。

CustomScrollView 不会向高度添加额外的填充。

SafeArea(
   child: CustomScrollView(
       slivers: <Widget>[
          getCatalogueAppbar(size, context),
          SliverToBoxAdapter(
            child: Container(
              width: size.width,
              child: buildTabBarView(size),
            ),
          ),
        ]));

NestedScrollView 内部不考虑正文大小和边距

Body size & margins not being respected inside NestedScrollView

flutter

nestedscrollview