我有三个按钮位于一组字段下面,我想增加宽度,直到达到一个固定的最大大小,如果空间是可用的。
Desired Behaviour Visualized
Maui在默认情况下似乎将按钮设置为最小尺寸以显示其文本。(如图中最小宽度部分所示)。
我的第一个调用点是尝试使用按钮控件的WidthRequest属性,但这会阻止按钮收缩。
最大宽度请求/最小宽度请求似乎也不是解决方案。
MaxWidthRequest仍然会导致使用最小大小,而MinwidthRequest的行为与WidthRequest类似,并防止按钮收缩。
我已经尝试了网格布局和水平布局来实现这一点。最接近的是有五列的网格布局,但它不能完全处理收缩。
下面是我的代码,其中一个是我在网格中做的尝试,另一个是在水平布局中做的尝试。
<Border Grid.Row="1" Grid.RowSpan="2">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5"/>
</Border.StrokeShape>
<VerticalStackLayout >
<Label Text="Run Setting"
TextColor="White"
FontSize="Small"
Padding="5,3"
BackgroundColor="DarkBlue"/>
<Grid ColumnDefinitions=" Auto, *, *"
RowDefinitions="Auto, Auto, Auto, Auto"
Padding="10"
RowSpacing="10"
ColumnSpacing="10">
<Label Text="Min:" FontSize="Micro" Grid.Column="1"/>
<Label Text="Max:" FontSize="Micro" Grid.Column="2"/>
<Label Text="Field 1:" VerticalOptions="Center" FontSize="Micro" Grid.Row="1"/>
<Entry Grid.Column="1" Grid.Row="1"/>
<Entry Grid.Column="2" Grid.Row="1"/>
<Label Text="Field 2:" VerticalOptions="Center" FontSize="Micro" Grid.Row="2"/>
<Entry Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2"/>
<Label Text="Field 3:" VerticalOptions="Center" FontSize="Micro" Grid.Row="3"/>
<Entry Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="2"/>
</Grid>
<Grid ColumnDefinitions="*, *, *, *, *" Padding="10,5,10,10" ColumnSpacing="5">
<Button BackgroundColor="DarkBlue" Grid.Column="1" Grid.Row="4" Text="Save" HorizontalOptions="Fill" MaximumHeightRequest="170" />
<Button BackgroundColor="DarkBlue" Grid.Column="2" Grid.Row="4" Text="Edit" HorizontalOptions="Fill" MaximumHeightRequest="170" />
<Button BackgroundColor="DarkBlue" Grid.Column="3" Grid.Row="4" Text="Accounts" HorizontalOptions="Fill" MaximumHeightRequest="170" />
</Grid>
<!--<HorizontalStackLayout HorizontalOptions="Center" Spacing="6" Padding="0,5,0,10">
<Button BackgroundColor="DarkBlue" Grid.Column="0" Grid.Row="4" Text="Save" WidthRequest="170" />
<Button BackgroundColor="DarkBlue" Grid.Column="1" Grid.Row="4" Text="Edit" WidthRequest="170"/>
<Button BackgroundColor="DarkBlue" Grid.Column="2" Grid.Row="4" Text="Accounts" WidthRequest="170"/>
</HorizontalStackLayout>-->
</VerticalStackLayout>
</Border>
我完全承认我是前台UI工作的新手,所以我可能是从完全错误的方向来的。
编辑1:-在试验H、A、H建议之后
请参见显示所提供代码和所需行为之间不同行为的随附图像。
H,A,H Vs Desired Behaviour
1条答案
按热度按时间qrjkbowd1#
给你,伙计,我是为你写的。我想我更擅长写而不是解释。