如何在Xamarin应用中通过Label显示WeatherBit返回的天气图标

当前代码的问题很直接：你把WeatherBit返回的Icon字段（类似c01d这类标识串）当成普通文本拼在Label里了，根本没给实际的图标留专门的展示控件位置，所以当然只能看到字符串、看不到图。具体调整步骤如下：

第一步：改XAML布局，给图标留独立控件位 #

把原来两个垂直排布的单Label结构，改成每个预报项水平排列：左边放日期时间文本、中间放天气图标、右边放温度文本，代码如下：

<Frame CornerRadius="10"  
       OutlineColor="Red"
       Margin="10,0,10,0"
       BackgroundColor="White"
       Opacity="0.5">
    <StackLayout VerticalOptions="Center" Spacing="10">
        <!-- 第一行预报 -->
        <StackLayout Orientation="Horizontal" Spacing="10" HorizontalOptions="Center">
            <Label x:Name="timeLabel"
                   VerticalOptions="Center"
                   TextColor="Black"
                   FontAttributes="Bold" 
                   FontSize="15" />
            <Image x:Name="weatherIcon1"
                   WidthRequest="30"
                   HeightRequest="30"
                   VerticalOptions="Center" />
            <Label x:Name="tempLabel"
                   VerticalOptions="Center"
                   TextColor="Black"
                   FontAttributes="Bold" 
                   FontSize="15" />
        </StackLayout>
        <!-- 第二行预报 -->
        <StackLayout Orientation="Horizontal" Spacing="10" HorizontalOptions="Center">
            <Label x:Name="timeLabel1"
                   VerticalOptions="Center"
                   TextColor="Black"
                   FontAttributes="Bold" 
                   FontSize="15" />
            <Image x:Name="weatherIcon2"
                   WidthRequest="30"
                   HeightRequest="30"
                   VerticalOptions="Center" />
            <Label x:Name="tempLabel1"
                   VerticalOptions="Center"
                   TextColor="Black"
                   FontAttributes="Bold" 
                   FontSize="15" />
        </StackLayout>
    </StackLayout> 
</Frame>

第二步：拆后台赋值逻辑，把Icon值给Image控件 #

原来的逻辑是把日期、Icon串、温度全拼成长字符串塞给Label，现在要把三部分拆开分别赋值，Icon值直接当图片源给Image控件，两种加载方式选一个就行：

• 远程加载（不用提前打包图标）
  WeatherBit的图标有固定的公开访问路径，拿到返回的Icon值后拼上路径前缀，直接当图片URL给Image就行：

  // 第一行预报赋值
  timeLabel.Text = DateDays.DayOfWeek + DateDays.ToString(" MM/dd - HH:mm");
  tempLabel.Text = weatherData.weatherForecast[0].Temperature + "°C";
  string iconPath = $"https://cdn.weatherbit.io/static/img/icons/{weatherData.weatherForecast[0].Weather.Icon}.png";
  weatherIcon1.Source = ImageSource.FromUri(new Uri(iconPath));
  
  // 第二行预报赋值
  timeLabel1.Text = DateDays1.DayOfWeek + DateDays1.ToString(" MM/dd - HH:mm");
  tempLabel1.Text = weatherData.weatherForecast[1].Temperature + "°C";
  string iconPath2 = $"https://cdn.weatherbit.io/static/img/icons/{weatherData.weatherForecast[1].Weather.Icon}.png";
  weatherIcon2.Source = ImageSource.FromUri(new Uri(iconPath2));
  

  这种方法不用把所有图标塞进安装包，包体更小，图标跟着平台更新也不用发版。
• 本地加载（无网也能显示）
  要是担心网络不稳加载慢，就提前把所有对应命名的图标（文件名要和接口返回的Icon值完全一致，比如c01d.png）按Xamarin的资源规则放到项目里，iOS放Resources、Android放Assets、共享项目用嵌入资源，然后直接引用本地资源名给Image赋值：

  weatherIcon1.Source = ImageSource.FromFile(weatherData.weatherForecast[0].Weather.Icon + ".png");
  weatherIcon2.Source = ImageSource.FromFile(weatherData.weatherForecast[1].Weather.Icon + ".png");
  

容易踩的坑 #

• 别想着把图标嵌在Label文本里显示，独立Image控件的渲染最稳，不会出尺寸适配问题
• 本地图标文件名必须和接口返回的Icon值一字不差，大小写错了、后缀名写错了都加载不出来
• 用远程加载的话，记得把iOS项目里的ATS配置加上对应域名的白名单，不然iOS会直接拦掉图片请求，白忙活

内容的提问来源于stack exchange，提问作者RositsaV