XAML MAUI:React式设计指定最大按钮宽度,但如果需要,允许按钮收缩

jvidinwx  于 2022-12-07  发布在  React
关注(0)|答案(1)|浏览(159)

我有三个按钮位于一组字段下面,我想增加宽度,直到达到一个固定的最大大小,如果空间是可用的。
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

qrjkbowd

qrjkbowd1#

<Grid ColumnDefinitions="*,Auto,*">
    <Button
        Grid.Column="1"            
        Text="MID"
        MaximumWidthRequest="100"
        HeightRequest="50"/>
    <Button
        Grid.Column="0"   
        HorizontalOptions="End"
        Text="LEFT BUTTON"            
        HeightRequest="50"/>
    <Button
        Grid.Column="2"            
        HorizontalOptions="Start"
        Text="RIGHT BUTTON"            
        HeightRequest="50"/>
</Grid>

给你,伙计,我是为你写的。我想我更擅长写而不是解释。

相关问题