uniswap源碼分析（七爪源碼PrefferredSizeVSFlexibleSpace）

2023-05-25 15:02:53 1

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/小程序/網站源碼資源！