动态设置Camera.MAUI组件宽高以适配不同屏幕

核心解决思路 #

1. 后置相机全屏适配 #

移除后置相机所在Grid的固定WidthRequest和HeightRequest，让外层Grid自动占满父容器，同时给CameraView设置HorizontalOptions="Fill"和VerticalOptions="Fill"，确保相机画面铺满全屏。

2. 前置相机与快门按钮的百分比尺寸实现 #

通过绑定父容器尺寸的百分比实现动态适配，搭配自定义转换器计算比例值，保证在不同屏幕尺寸下元素占比一致。

修改后的完整XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cv="clr-namespace:Camera.MAUI;assembly=Camera.MAUI"
             xmlns:local="clr-namespace:App.Components"
             x:Class="App.Components.Camera">
    <ContentView.Resources>
        <!-- 声明百分比转换器 -->
        <local:PercentConverter x:Key="PercentConverter"/>
    </ContentView.Resources>

    <!-- 外层Grid默认占满父容器 -->
    <Grid x:Name="RootGrid">
        <!-- 前置相机：左上角悬浮，尺寸为屏幕宽度的25%，高度按4:3相机比例计算 -->
        <Frame CornerRadius="10"
               ZIndex="1000"
               VerticalOptions="Start" 
               HorizontalOptions="Start" 
               Margin="10"
               WidthRequest="{Binding Source={x:Reference RootGrid}, Path=Width, Converter={StaticResource PercentConverter}, ConverterParameter=0.25}"
               HeightRequest="{Binding Source={x:Reference RootGrid}, Path=Width, Converter={StaticResource PercentConverter}, ConverterParameter=0.375}">
            <cv:CameraView 
                x:Name="FrontCameraView" 
                CamerasLoaded="FrontCameraLoaded"
                HorizontalOptions="Fill"
                VerticalOptions="Fill"/>
        </Frame>

        <!-- 后置相机：全屏填充 -->
        <Grid ZIndex="900">
            <cv:CameraView 
                x:Name="BackCameraView" 
                CamerasLoaded="BackCameraLoaded"
                HorizontalOptions="Fill"
                VerticalOptions="Fill"/>
        </Grid>

        <!-- 快门按钮：尺寸为屏幕宽度的20%，居中底部 -->
        <Grid ZIndex="1000" 
              VerticalOptions="End" 
              HorizontalOptions="Center" 
              Margin="20"
              WidthRequest="{Binding Source={x:Reference RootGrid}, Path=Width, Converter={StaticResource PercentConverter}, ConverterParameter=0.2}"
              HeightRequest="{Binding Source={x:Reference RootGrid}, Path=Width, Converter={StaticResource PercentConverter}, ConverterParameter=0.2}">
            <ImageButton 
                Source="../Resources/Images/camera_shutter_circle.svg"
                Clicked="SnapImages"
                HorizontalOptions="Fill"
                VerticalOptions="Fill"/>
        </Grid>
    </Grid>
</ContentView>

补充：百分比转换器代码实现 #

在代码后台添加以下转换器类，用于计算父容器尺寸的百分比：

namespace App.Components
{
    public class PercentConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is double parentSize && double.TryParse(parameter.ToString(), out double percent))
            {
                return parentSize * percent;
            }
            return 0;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

关键细节说明 #

• 外层RootGrid默认占满父容器空间，无需额外设置尺寸
• 前置相机采用屏幕宽度25%作为基准，按4:3比例计算高度，保证相机画面比例正常
• 快门按钮以屏幕宽度的20%作为宽高，确保在不同设备上视觉占比一致
• 所有CameraView设置Fill选项，让相机画面完全填充所在容器

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