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

Body size & margins not being respected inside NestedScrollView

我试图理解为什么在这种情况下的代码下面的“容器”作为示例,填充整个 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'),
            ),
          ),
        ),
      ),
    );

您可以在整个页面上添加一个 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'),
            ),
          ),
        ],
      ),
    ),
  ),
);

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

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

为了Container保持其大小,设置父级,它有自己的约束,例如CenterColumnStack

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

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

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