xamarin 如何在NET MAUI中创建带有半颗星的滑动评级条

hiz5n14c 于 2022-12-07 发布在其他

关注(0)|答案(3)|浏览(130)

我设法创建了一个只显示评级结果的评级控件，但我正在努力想出一个解决方案，即用户在哪里滑动评级栏，并根据滑动位置，星星可以填充一半或全部，控件还将返回用户输入的值。任何提示或建议都将是有帮助的，我尝试创建一个水平堆栈布局，但我不知道如何动态地改变照片时，滑动例如检测到的照片应该是一个半星。附上的图像为预期的结果如下。它应该适用于Android和iOS。
enter image description here

xamarin

来源：https://stackoverflow.com/questions/74611973/how-to-create-sliding-rating-bar-with-half-stars-in-net-maui

3条答案

按热度按时间

n3schb8v1#

您可以尝试使用SkiaRate。请参阅Github上的clovisnicolas/SkiaRate。
只需使用以下代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         ...
         xmlns:skia="clr-namespace:SkiaRate;assembly=SkiaRate.Forms">
    ...
    <skia:RatingView x:Name="myrate"  ColorOn="Yellow" Count="5"  PaintSurface="myrate_PaintSurface" />

在.cs文件中，获取分数

void myrate_PaintSurface(System.Object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs e)
    {
        var a = myrate.Value;
        Console.WriteLine(myrate.Value);
    }

希望对你有用。

赞(0）回复(0）举报 2022-12-07

zfciruhq2#

您可以 checkout 塞巴斯蒂安提供的此控件：https://medium.com/@tsjdevapps/net-maui-create-a-simple-rating-control-560566fa5014
这是Github：https://github.com/tsjdev-apps/maui-ratingcontrol
你可以这样使用它：

<controls:SimpleRatingControl Amount="5"
                                  CurrentValue="1"
                                  AccentColor="Black"
                                  StarSize="36" />

赞(0）回复(0）举报 2022-12-07

jq6vz3qz3#

所以我用了一个滑块和一个网格。
在我的XAML中：

<VerticalStackLayout
        Spacing="25"
        Padding="30,0"
        VerticalOptions="Center">

        <Grid
            x:Name="starGrid"
            ColumnDefinitions="*,*,*,*,*"  />

        <Slider MaximumTrackColor="Black"
                MinimumTrackColor="Black"
                Minimum="0.0"
                Maximum="5.0"
                ValueChanged="Slider_ValueChanged" />

</VerticalStackLayout>

我定义了一个网格，它将保存我的星星，以及一个滑块，当用户滑动时，我将侦听ValueChanged事件。
在后面的代码中：

void Slider_ValueChanged(Object sender, ValueChangedEventArgs e)
{
    starGrid.Children.Clear();

    if (e.NewValue >= .25 && e.NewValue < .75)
    {
        starGrid.Add(new Image { Source = ImageSource.FromFile("half_star.png") }, 0,0);
    }
    else if (e.NewValue >= .75 && e.NewValue < 1.25)
    {
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 0,0);
    }
    else if (e.NewValue >= 1.25 && e.NewValue < 1.75)
    {
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 0, 0);
        starGrid.Add(new Image { Source = ImageSource.FromFile("half_star.png") }, 1, 0);
    }
    else if (e.NewValue >= 1.75 && e.NewValue < 2.25)
    {
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 0, 0);
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 1, 0);
    }
    else if (e.NewValue >= 2.25 && e.NewValue < 2.75)
    {
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 0, 0);
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 1, 0);
        starGrid.Add(new Image { Source = ImageSource.FromFile("half_star.png") }, 2, 0);
    }
    else if (e.NewValue >= 2.75)
    {
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 0, 0);
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 1, 0);
        starGrid.Add(new Image { Source = ImageSource.FromFile("star.png") }, 2, 0);
    }
}

每次滑块值改变时，我们都会清除starGrid，然后根据值添加适当的星星。我在三颗星星处停了下来，但模式应该很明显。
请注意，这并不是最好的方法。理想情况下，只有在需要更新星号时，才不会在每次更改值时清除网格。另外，if语句非常难看，可以大大地清除。但这应该是一个很好的起点。