堆栈内存溢出
  繁体   English   中英

使用 OnPlatform 更改 IOS 和 macOS 的按钮宽度

[英]Using OnPlatform to change the width of buttons for IOS and macOS

 原文  2021-02-17 21:14:19  4   1    ios/ macos/ xaml/ xamarin.forms

问题描述

我无法弄清楚为什么我的图像没有按我想要的方式显示：

<Image
    Margin="0,0,0,10"
    HorizontalOptions="Center"
    Source="AppIcon"
    WidthRequest="{OnPlatform iOS=160,
                   macOS=80}" />
  • iOS 模拟器：

在此处输入图像描述

  • 苹果系统

在此处输入图像描述

我了解各种设备上的图像存在问题，因此我们为资产中的图标集添加了所有图像 - 我拥有所有这些图像。

我的弹出页面设置为 400 的宽度。我认为如果我使用 `OnPlatform' 属性就足够了。 我的 XAML：

<?xml version="1.0" encoding="UTF-8" ?>
<pages:PopupPage
    x:Class="ElderlyInfirmRota.Pages.EditNamePopupPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
    xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
    <!--  You can set an animation in the xaml file or in the csharp code behind  -->
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation
            DurationIn="400"
            DurationOut="300"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True"
            PositionIn="Center"
            PositionOut="Center"
            ScaleIn="1.2"
            ScaleOut="0.8" />
    </pages:PopupPage.Animation>

    <Frame
        Margin="50,0,50,0"
        BackgroundColor="{AppThemeBinding Dark=#2C2C2F,
                                          Light=White}"
        CornerRadius="10"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="400">
        <StackLayout
            Padding="10"
            HorizontalOptions="Center"
            VerticalOptions="Center">
            <Image
                Margin="0,0,0,10"
                HorizontalOptions="Center"
                Source="AppIcon"
                WidthRequest="{OnPlatform iOS=160,
                                          macOS=80}" />
            <Label
                x:Name="HeadingLabel"
                Margin="0,0,0,10"
                HorizontalOptions="Center"
                Text="Add / Edit Name" />
            <Label x:Name="NameLabel" Text="Name:" />
            <Entry
                x:Name="NameEntry"
                HorizontalOptions="Fill"
                Placeholder="Enter name" />
            <Grid HorizontalOptions="Fill">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button
                    x:Name="OKButton"
                    Grid.Column="0"
                    Margin="20"
                    Padding="5"
                    BackgroundColor="#68686B"
                    BorderColor="WhiteSmoke"
                    BorderWidth="1"
                    Clicked="OKButton_Clicked"
                    HorizontalOptions="Fill"
                    Text="OK"
                    TextColor="White" />
                <Button
                    x:Name="CancelButton"
                    Grid.Column="1"
                    Margin="20"
                    Padding="5"
                    BackgroundColor="#68686B"
                    BorderColor="WhiteSmoke"
                    BorderWidth="1"
                    Clicked="CancelButton_Clicked"
                    HorizontalOptions="Fill"
                    Text="Cancel"
                    TextColor="White" />
            </Grid>
        </StackLayout>
    </Frame>

</pages:PopupPage>

任何指导或指针表示赞赏。

这是我的资产 json 文件：

{
  "images": [
    {
      "filename": "40.png",
      "size": "20x20",
      "scale": "2x",
      "idiom": "iphone"
    },
    {
      "filename": "60.png",
      "size": "20x20",
      "scale": "3x",
      "idiom": "iphone"
    },
    {
      "filename": "58.png",
      "size": "29x29",
      "scale": "2x",
      "idiom": "iphone"
    },
    {
      "filename": "87.png",
      "size": "29x29",
      "scale": "3x",
      "idiom": "iphone"
    },
    {
      "filename": "80.png",
      "size": "40x40",
      "scale": "2x",
      "idiom": "iphone"
    },
    {
      "filename": "120.png",
      "size": "40x40",
      "scale": "3x",
      "idiom": "iphone"
    },
    {
      "filename": "120-1.png",
      "size": "60x60",
      "scale": "2x",
      "idiom": "iphone"
    },
    {
      "filename": "180.png",
      "size": "60x60",
      "scale": "3x",
      "idiom": "iphone"
    },
    {
      "filename": "20.png",
      "size": "20x20",
      "scale": "1x",
      "idiom": "ipad"
    },
    {
      "filename": "40-1.png",
      "size": "20x20",
      "scale": "2x",
      "idiom": "ipad"
    },
    {
      "filename": "29.png",
      "size": "29x29",
      "scale": "1x",
      "idiom": "ipad"
    },
    {
      "filename": "58-1.png",
      "size": "29x29",
      "scale": "2x",
      "idiom": "ipad"
    },
    {
      "filename": "40-2.png",
      "size": "40x40",
      "scale": "1x",
      "idiom": "ipad"
    },
    {
      "filename": "80-1.png",
      "size": "40x40",
      "scale": "2x",
      "idiom": "ipad"
    },
    {
      "filename": "167.png",
      "size": "83.5x83.5",
      "scale": "2x",
      "idiom": "ipad"
    },
    {
      "filename": "76.png",
      "size": "76x76",
      "scale": "1x",
      "idiom": "ipad"
    },
    {
      "filename": "152.png",
      "size": "76x76",
      "scale": "2x",
      "idiom": "ipad"
    },
    {
      "filename": "1024.png",
      "size": "1024x1024",
      "scale": "1x",
      "idiom": "ios-marketing"
    },
    {
      "size": "60x60",
      "scale": "2x",
      "idiom": "car"
    },
    {
      "size": "60x60",
      "scale": "3x",
      "idiom": "car"
    },
    {
      "role": "notificationCenter",
      "size": "24x24",
      "subtype": "38mm",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "role": "notificationCenter",
      "size": "27.5x27.5",
      "subtype": "42mm",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "role": "companionSettings",
      "size": "29x29",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "role": "companionSettings",
      "size": "29x29",
      "scale": "3x",
      "idiom": "watch"
    },
    {
      "role": "appLauncher",
      "size": "40x40",
      "subtype": "38mm",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "role": "appLauncher",
      "size": "44x44",
      "subtype": "40mm",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "role": "appLauncher",
      "size": "50x50",
      "subtype": "44mm",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "role": "quickLook",
      "size": "86x86",
      "subtype": "38mm",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "role": "quickLook",
      "size": "98x98",
      "subtype": "42mm",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "role": "quickLook",
      "size": "108x108",
      "subtype": "44mm",
      "scale": "2x",
      "idiom": "watch"
    },
    {
      "size": "1024x1024",
      "scale": "1x",
      "idiom": "watch-marketing"
    },
    {
      "size": "16x16",
      "scale": "1x",
      "idiom": "mac"
    },
    {
      "size": "16x16",
      "scale": "2x",
      "idiom": "mac"
    },
    {
      "size": "32x32",
      "scale": "1x",
      "idiom": "mac"
    },
    {
      "size": "32x32",
      "scale": "2x",
      "idiom": "mac"
    },
    {
      "size": "128x128",
      "scale": "1x",
      "idiom": "mac"
    },
    {
      "size": "128x128",
      "scale": "2x",
      "idiom": "mac"
    },
    {
      "size": "256x256",
      "scale": "1x",
      "idiom": "mac"
    },
    {
      "size": "256x256",
      "scale": "2x",
      "idiom": "mac"
    },
    {
      "size": "512x512",
      "scale": "1x",
      "idiom": "mac"
    },
    {
      "size": "512x512",
      "scale": "2x",
      "idiom": "mac"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

文件名不符合xxxx@2x.png方法，但这无关紧要，因为 json 说明了这种关系。

更新

我添加了一个 PNG 作为资源（大小为 1024 像素）并尝试了这个 XAML：

<Image
    Margin="0,0,0,10"
    HorizontalOptions="Center"
    Source="AppIcon"
    WidthRequest="{OnPlatform iOS='160',
                              macOS='80'}" />

<Image Source="1024.png" WidthRequest="160" />
<Image Source="1024.png">
    <Image.WidthRequest>
        <OnPlatform x:TypeArguments="x:Double">
            <On Platform="iOS" Value="160" />
            <On Platform="macOS" Value="40" />
        </OnPlatform>
    </Image.WidthRequest>
</Image>
<Image Source="AppIcon">
    <Image.WidthRequest>
        <OnPlatform x:TypeArguments="x:Double">
            <On Platform="iOS" Value="160" />
            <On Platform="macOS" Value="40" />
        </OnPlatform>
    </Image.WidthRequest>
</Image>

结果：

在此处输入图像描述

它不喜欢在我的模拟器上使用 AppIcon 资源。 仅来自资源文件夹。

1 个解决方案

解决方案1
 0 已采纳  2021-02-22 15:45:30

正如评论中向我提到的，我们有一个解决方法。

我访问了 appicon.co 网站并创建了 3 个版本的 1024 PNG 文件：

在此处输入图像描述

我还确保它们被正确命名。

我在资产中创建了一个图像集（对于 iOS 和 macOS）：

在此处输入图像描述

最后，我调整了我的 XAML 以使用这个图像集：

<Image
    Margin="0,0,0,10"
    HorizontalOptions="Center"
    Source="AppLogo"
    WidthRequest="{OnPlatform iOS='160',
                              macOS='80'}" />

我不知道如何验证OnPlatform是否提供了正确的尺寸（我认为它们现在是正确的）。 在 iOS 模拟器上，它现在看起来不错：

在此处输入图像描述

因此，使用AppIcon资源而是使用专用的Image Set资源似乎不是一个好主意。

唯一烦人的是，当我只添加 3 个图像时，现在构建会发出警告：

在此处输入图像描述

但我看到这个问题是去年提出的，没有官方解决方案。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 iOS：使用多个按钮更改背景颜色 iOS上的可变宽度选择按钮 按钮的高度和宽度不相同（iOS） 在ios中更改UItableviewCell的宽度 更改 iOS 上相机按钮的语言？ iOS 中的 Android 重量（7 个按钮的宽度相等） 如何使用Device.OnPlatform翻译此填充？ （iOS案例） 更改按钮中png的颜色 - ios 在iOS 8中更改UISegmentedControl的边框宽度 iOS - 更改UIPickerView组件宽度
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM