如何为 xamarin 表单上的每个屏幕制作相同大小的按钮

Question

我正在尝试制作一个带有 6 个按钮的屏幕，我需要每个屏幕的尺寸都相同，因为现在一些更小或更大的屏幕按钮被切碎或变得太小。

    <StackLayout>
    <StackLayout Orientation="Horizontal"  HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Vertical"  HorizontalOptions="FillAndExpand">
            <Button Text="Linfócito" Font="{StaticResource Fonte}" ContentLayout="top,0"  FontAttributes="{StaticResource Atributo}" WidthRequest="150" HeightRequest="200" Image="Linfocito.jpg"/>
            <Button Text="Linfocito" Font="{StaticResource Fonte}" WidthRequest="150" ContentLayout="top,0" FontAttributes="{StaticResource Atributo}" HeightRequest="200" Image="Linfocito.jpg"  Clicked="Button_Clicked"/>
            <Button Text="Linfocito22" Font="{StaticResource Fonte}" WidthRequest="150" ContentLayout="top,0" FontAttributes="{StaticResource Atributo}"  HeightRequest="200" Image="" />
        </StackLayout>

我使用 Xamarin.Forms 在 xaml 中做，在此先感谢

Answer 1

您应该更具体地了解所需的布局，但我认为您希望您的按钮始终水平填充屏幕，而与屏幕分辨率/大小/密度无关...

问题

在您的示例中，您使用 'WidthRequest' 和 'HeightRequest' 属性为按钮使用固定大小：

<Button ... WidthRequest="150" HeightRequest="200"... />

所以在这种情况下，如果分辨率太小，你的按钮被裁剪，或者如果分辨率高，你的按钮不会填满屏幕，这是正常的。你的按钮不遵循屏幕分辨率，而是你给它们的大小。

你应该做什么：

使用相对布局。这意味着，不是设置固定大小，而是使用自动响应“约束”而不是大小的布局控件。

在您的情况下，我建议您使用 Grid 控件。这是一个示例，但有许多可能的解决方案：

<?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="GoodChapp.XForms.Views.MyPage">

    <ContentPage.Content>

    <!-- full screen grid -->
    <Grid>

        <!-- Define the rows containing your page controls -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="200" /> <!-- row that will contains buttons -->
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Row 0: Put whatever you want inside -->
        <!-- Height will stretch to its content -->

        <!-- Row 1: This grid layouts your buttons horizontally -->
        <!-- It will fill horizontally the whole screen -->
        <!-- With 3 columns of the same size -->
        <Grid Grid.Row="1"> 
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!-- button 1 -->
            <Button Grid.Column="0"
                    Text="Linfócito" 
                    Font="{StaticResource Fonte}" 
                    FontAttributes="{StaticResource Atributo}"
                    Image="Linfocito.jpg"
                    />

            <!-- button 2 -->
            <Button Grid.Column="1"
                    Text="Linfócito2" 
                    Font="{StaticResource Fonte}" 
                    FontAttributes="{StaticResource Atributo}"
                    Image="Linfocito.jpg"
                    />

            <!-- button 3 -->
            <Button Grid.Column="2"
                    Text="Linfócito3" 
                    Font="{StaticResource Fonte}" 
                    FontAttributes="{StaticResource Atributo}"
                    Image="Linfocito.jpg"
                    />
        </Grid>

        <!-- Row 2: The last row will take the  remaining available height -->


    </Grid>
</ContentPage.Content>

关键点是页面布局的定义和定义正确的网格行高和列宽......

Xamarin Fors Grid Control中对 Grid 控件有很好的介绍，但我建议您阅读整个“布局”段落。您将对问题的不同解决方案有一个清晰的认识。

但总而言之，在我的应用程序中，我认为这是一个很好的设计实践，我尝试使用尽可能少的固定宽度和高度。

告诉我是否足够清楚。否则不要忘记验证答案。谢谢