在Xamarin Forms中添加多个标签

Question

我有以下标签:

<Label Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" TextColor="Green"/>

按钮上的事件:

correctButton.Clicked += (sender, e) =>
{
   App.DB.IncrementScore();
};

这样做是每次我点击一个按钮我的分数增加1.我想要做的是Label根据分数增加s的数量.请参见下图:

任何人都知道我怎么能做到这一点？

Answer 1

这个问题有不同的解决方案.在选择之前一定要仔细阅读所有这些内容 - 我最喜欢的(最简单的一个)一直列在...

方法#1:

正如几个人建议的那样,你可以创建一些集合控件(稍后我会介绍),ObservableCollection在ViewModel中定义一个,将Page设置为该ViewModel的Binding Context一个实例,并在按钮点击时将项添加到集合中:

public class MyViewModel()
{
    public ObservableCollection<int> Items { get; set; } = new ObservableCollection<int>();
}

private MyViewModel _viewModel = new MyViewModel();
public MainPage()
{
    InitializeComponent();

    BindingContext = _viewModel;
}

correctButton.Clicked += (sender, e) =>
{
    App.DB.IncrementScore();
    _viewModel.Items.Add(0);
};

ObservableCollection实际上类型并不重要,因为我们ItemTemplate对所有项目使用相同的静态:

<ContentPage.Resources>
    <DataTemplate x:Key="ScoreItemTemplate">
        <ViewCell>
            <ViewCell.View>
                <Label Text="{x:Static local:FontAwesome.FACheck}" FontFamily="FontAwesome" TextColor="Green"/>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</ContentPage.Resources>

这种方法的主要问题是Xamarin.Forms ListView无法水平显示其项目.这意味着,您需要下载其中一个可用的HorizontalListViewNuget包,或者使用内置的(仅限Xamarin.Forms 2.3及更高版本!)CarouselView:

<CarouselView ItemTemplate="{StaticResource ScoreItemTemplate}" ItemsSource="{Binding Items}"/>

然后,您可能希望花一些时间去除所有视觉效果以通过旋转木马滑动,并选择项目,如果您选择使用水平ListView ...

相反,有两种替代解决方案需要较少的努力:

方法#2:

显然,简单的方法是在代码中创建"模板"标签:

private Label CreateScoreLabel()
{
    return new Label {Text = FontAwesome.FACheck, TextColor = Color.Green, FontFamily = "FontAwesome"};
}

... StackLayout为页面添加水平:

<StackLayout Orientation="Horizontal" x:Name="LabelStack"/>

...并以艰难的方式添加新标签:

correctButton.Clicked += (sender, e) =>
{
    App.DB.IncrementScore();
    LabelStack.Children.Add(CreateScoreLabel());
};

然而,所有这一切似乎相当hacky只是创建绿色复选标记列表.这导致我们......

......方法#3:

从技术上讲,这并不是您要求的(增加标签数量),但根据您的屏幕截图,它可能会以更简单的方式满足您的需求.

删除现有标签的文本(因为它在启动时不显示任何内容),而是给它一个唯一的名称:

<Label x:Name="ScoreLabel" FontFamily="FontAwesome" TextColor="Green"/>

现在,为string重复给定字符串一定次数的类型定义一个简单的扩展方法:

public static class StringExtensions
{
    public static string Repeat(this string input, int num)
    {
        return String.Concat(Enumerable.Repeat(input, num));
    }
}

(有多种方法可以使这种重复功能尽可能高效,我只选择最简单的单线程,搜索StackOverflow进行详细讨论......)

您现在可以使用LabelXAML中定义的单个控件,只需在按钮单击时为其指定几个复选标记:

correctButton.Clicked += (sender, e) =>
{
    App.DB.IncrementScore();
    ScoreLabel.Text = FontAwesome.FACheck.Repeat(App.DB.Score); // replace parameter by whatever method allows you to access the current score number
};

当然,这种方法也可以通过简单地使用公共可绑定string属性而不是Text直接设置标签属性来适应MMVM方式,但为此我建议你看一下初学者的MVVM教程.