Question

我在Xamarin.Forms中正确缩放容器的高度和字体大小时遇到问题。

1）第一个问题是我需要在一个容器中设置静态高度，但是在不同的设备上它看起来有所不同。我不完全知道，但是假设问题可能是由屏幕密度引起的。我应该以某种方式缩放容器的高度还是Xamarin.Forms应该为我处理吗？

2）第二个问题是我需要设置适当的跨平台字体。有没有办法让Xamarin.Forms为我处理它，还是需要我使用Device.RuntimePlatform属性来设置它？也如此处所述：https://docs.microsoft.com/pl-pl/xamarin/xamarin-forms/user-interface/text/fonts-命名字体大小是不可接受的解决方案。对于iPod，我需要使用micro，但在android上几乎看不到文本。

在模拟器上，发生了很多奇怪的事情，顶部栏超出了比例，并且整个外观被缩放了。这是我的错，还是Xamarin不是我认为的通用平台？

这是我页面的代码：

<StackLayout>
    <SearchBar 
        VerticalOptions="Start"
        TextChanged="SearchBar_OnTextChanged"
        PlaceholderColor="#C0C0C0"></SearchBar>

    <ListView 
        BackgroundColor="#f2f2f2"
        VerticalOptions="Center"
        ItemTapped="SelectProcedure"
        CachingStrategy="RecycleElement">

        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell 
                    Text="{Binding Name}" 
                    TextColor="Black"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <StackLayout 
        BackgroundColor="White"
        HeightRequest="80"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="EndAndExpand">

        <Grid
            Padding="10,5,10,5"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label
                Grid.Column="0"
                Grid.Row="0"
                VerticalTextAlignment="Center"
                VerticalOptions="Center"
                HorizontalTextAlignment="Center"
                HorizontalOptions="Center"
                TextColor="Black"/>

            <telerikInput:RadButton 
                Grid.Column="1"
                Grid.Row="0"
                Padding="5,0,5,0"
                ImageSource="plus.png"/>

        </Grid>
    </StackLayout>
</StackLayout>

这是我拥有的两个设备和模拟器的屏幕截图：

Android 8.1

iPod touch 6

Android 8.1（仿真器）

Answer 1

解决方案：：您可以将HeightRequest网格设置为屏幕高度的百分比（例如10％）。

<StackLayout 
        BackgroundColor="White"
        HeightRequest="{Binding stackHeight}"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="EndAndExpand">

在共享项目App.xaml.cs中

public static double ScreenWidth;
public static double ScreenHeight;

在Android MainActivity.cs中

protected override void OnCreate(Bundle savedInstanceState)
{
   TabLayoutResource = Resource.Layout.Tabbar;
   ToolbarResource = Resource.Layout.Toolbar;

   base.OnCreate(savedInstanceState);

   Xamarin.Essentials.Platform.Init(this, savedInstanceState);

   global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental", "CollectionView_Experimental");
   global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

   App.ScreenWidth = Resources.DisplayMetrics.WidthPixels/Resources.DisplayMetrics.Density; 
   App.ScreenHeight =Resources.DisplayMetrics.HeightPixels/Resources.DisplayMetrics.Density; 

   LoadApplication(new App());
}

在iOS中

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    //...
    App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
    App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
    //...
}

在代码背后或ViewModel中

public double stackHeight { get; private set; }

//...

if(Device.RuntimePlatform=="iOS")
{
  stackHeight= App.ScreenHeight/5.0;
}
else
{
  stackHeight= App.ScreenHeight/20.0;
}

对于Xamarin.Forms中的自定义字体，您可以选中https://xamarinhelp.com/custom-fonts-xamarin-forms/

如何在Xamarin.Forms中缩放字体和容器的高度

1 个答案:

在共享项目App.xaml.cs中

在Android MainActivity.cs中

在iOS中

在代码背后或ViewModel中