七爪源码:PrefferredSizeVS FlexibleSpace - 颤振

PrefferredSize Widget：

PrefferredSize Widget 用于控制 AppBar。 此小部件不会对其子组件施加任何约束，并且不会以任何方式影响子组件的布局。 它只是宣传可以由父母使用的首选尺寸。

像 Scaffold 这样的父母使用 PreferredSizeWidget 来要求他们的孩子实现该接口。 要为任意小部件提供首选大小，以便可以在该类型的子属性中使用它，可以使用此小部件 PreferredSize。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}

不再需要使用 PreferredSize。 使用 toolbarHeight 和 flexibleSpace

AppBar 中的 FlexibleSpace 属性：

此小部件堆叠在工具栏和选项卡栏的后面。 它的高度将与应用栏的整体高度相同。

除非 AppBar 的容器改变了 AppBar 的大小，否则灵活空间实际上并不灵活。 CustomScrollView 中的 SliverAppBar 会在滚动时更改 AppBar 的高度。

AppBar(
  toolbarHeight: 120, // Set this height
  flexibleSpace: Container(
    color: Colors.orange,
    child: Column(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    ),
  ),
)

您可以使用 PreferredSize 和 flexibleSpace ：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: Container(),
  )
),

您可以使用 PreferredSize 和 flexibleSpace ：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

这样，您可以保持 AppBar 的高度以保持其阴影可见并具有自定义高度，这正是我想要的。 不过，您必须在 Container() 中设置间距。

关注七爪网，获取更多APP/小程序/网站源码资源！