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>

我正在使用Xamal.Forms进行xaml，提前谢谢

Answer 1

你应该对所需的布局更具体，但我认为你想要你的按钮总是水平地填满屏幕，与屏幕分辨率/尺寸/密度无关......

问题

在您的例子中，您使用固定尺寸使用＆＃39; WidthRequest＆＃39; ＆安培; ＆＃39; HeightRequest＆＃39;属性：

<?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>

因此，在这种情况下，如果分辨率太小，则裁剪按钮是正常的，如果分辨率很高，则不会填满屏幕。您的按钮不会遵循屏幕分辨率，而是按照您提供的尺寸。

你应该做什么：

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

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

{{1}}

关键点是页面布局的定义，并定义了正确的网格行高度＆amp;列宽...

这里有一个很好的网格控件演示UIResponderStandardEditActions，但我建议你阅读整个＆＃34;布局＆＃34;段。您将清楚地了解针对您的问题的不同解决方案。

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

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

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

1 个答案:

问题

你应该做什么：