1.概要
既然要做實戰開發會建項目之后就需要認識布局控件了,本篇文章分享.NET MAUI中的一些基礎常用的布局控件。
Grid
StackLayout
FalyxLayout
AbsoluteLayout
2.詳細內容
(1)Grid
語法:
<Grid RowDefinitions="50,50,50,50" RowSpacing="10" ColumnDefinitions="10,10" ColumnSpacing="10" Margin="{OnPlatform WinUI=5}"></Grid>
解讀:
在MAUI中Grid的語法相比WPF來說,有不少的優化我們來逐個看看有哪些更新。(本文只演示了部分用法不代表全部)
屬性名 | 作用 |
---|---|
RowDefinitions | 定義有幾行(每用一個逗號分隔就代表有幾行,以上代碼為例有4個50那么就定義了4行高度為50的行) |
RowSpacing | 定義行間距(每行的間隔為10px) |
ColumnDefinitions | 定義有幾列(每用一個逗號分隔就代表有幾列,以上代碼為例有2個10那么就定義了2列寬度為10的列) |
ColumnSpacing | 列間距(每行的間隔為10px) |
Margin | 定義內邊距(這里的邊距定義還需要指定對應的生效的平臺,同時可以指定多個平臺的上表現,以上代碼的定義是在WinUI的平臺上的每行的間隔為5px,還能指定其它平臺的內容。如果不關心平臺那么可以直接設定default默認全平臺都按照這個樣式來展現) |
同時MAUI中的Grid也保留了以前WPF中Grid的定義,大家能看到藍色的波浪線說明兩種寫法只能用其中一種。
代碼應用:
(2)StackLayout
語法:
<StackLayout Orientation="Horizontal" Spacing="10" ?HorizontalOptions="Center" VerticalOptions="Center"/>
解讀:
StackLayout和WPF中的StackPanle基礎用法沒有太大區別,不過還是多了一些MAUI中的特性。(本文只演示了部分用法不代表全部)
屬性名 | 作用 |
---|---|
Orientation | 指定布局內容橫向排列或縱向排列 |
Spacing | 指定布局內容的排列間距 |
HorizontalOptions | 按比例橫向空間分布布局內容 |
VerticalOptions | 按比例縱向空間分布布局內容 |
代碼應用:
<StackLayout Orientation="Horizontal" Spacing="10" ?HorizontalOptions="Center" VerticalOptions="Center"><Button></Button></StackLayout>
(3)FalyxLayout
語法:
<FlexLayout><Button WidthRequest="100" HeightRequest="20"></Button><Button WidthRequest="100" HeightRequest="20"></Button><Button WidthRequest="100" HeightRequest="20"></Button>
</FlexLayout>
解讀:
我個人的理解是,該布局控件會自適應父級控件的寬高來自動調整布局。(這個控件的用法可以參考xamarin的文檔。)
當窗體縮小時,布局會“收攏”。
(4)AbsoluteLayout
語法:
<AbsoluteLayout><Button AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="50,50"/>
</AbsoluteLayout>
解讀:
AbsoluteLayout和WPF中的Canvs非常類似。絕對定位的布局方式。(本文只演示了部分用法不代表全部)
屬性名 | 作用 |
---|---|
AbsoluteLayout.LayoutFlags | 指定布局方式的枚舉 |
AbsoluteLayout.LayoutBounds | 指定控件位置的坐標(示例中:x軸50,y軸50),可選值:AutoSize, 比例值(1為最大值可填0.7),位置值50 |