在Xamarin.Forms XAML中可添加多值的控件及点击+按钮新增值实现方法

嘿，我来帮你梳理这个问题：

一、支持多值输入/管理的控件 #

这些是Xamarin.Forms里适配多值场景的常用选择：

• CollectionView/ListView：最推荐的方案，专门用来展示和管理一组动态数据项，每个项可以是输入控件（比如Entry）或者自定义视图，完美适配多值添加、删除的需求。
• 多选Picker：原生Picker是单选，但可以通过自定义逻辑或者成熟的第三方组件实现多选，让用户从选项列表中选择多个值。
• Editor：如果允许用户输入多行文本（比如用换行分隔多个值），Editor可以作为单控件实现多值输入，但后续需要自己处理文本解析拆分。
• 动态布局+Entry：把多个Entry放在StackLayout或Grid这类布局里，通过动态添加Entry控件来实现多值输入，不过这种方式不如CollectionView灵活。

二、点击“+”按钮添加新值的实现（以CollectionView为例） #

我给你一个完整的可运行示例，这是最常用也最灵活的方案：

1. 定义数据模型 #

首先创建一个实现INotifyPropertyChanged的模型类，用来绑定每个输入框的值：

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace YourAppNamespace
{
    public class InputValueItem : INotifyPropertyChanged
    {
        private string _value;
        public string Value
        {
            get => _value;
            set
            {
                _value = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2. 编写视图模型（ViewModel） #

在ViewModel里维护一个ObservableCollection来存储所有输入项，同时添加添加/删除的命令：

using System.Collections.ObjectModel;
using System.Windows.Input;
using Xamarin.Forms;

namespace YourAppNamespace
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<InputValueItem> InputItems { get; set; }
        public ICommand AddNewValueCommand { get; }
        public ICommand RemoveValueCommand { get; }

        public MainPageViewModel()
        {
            InputItems = new ObservableCollection<InputValueItem>();
            // 初始化一个默认输入项
            InputItems.Add(new InputValueItem());
            
            AddNewValueCommand = new Command(AddNewInputItem);
            RemoveValueCommand = new Command<InputValueItem>(RemoveInputItem);
        }

        private void AddNewInputItem()
        {
            InputItems.Add(new InputValueItem());
        }

        private void RemoveInputItem(InputValueItem item)
        {
            if (InputItems.Contains(item))
            {
                InputItems.Remove(item);
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

3. 编写XAML布局 #

在页面XAML中绑定ViewModel，用CollectionView展示输入项，加上“+”添加按钮：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">
    <ContentPage.BindingContext>
        <local:MainPageViewModel />
    </ContentPage.BindingContext>

    <StackLayout Padding="20" Spacing="15">
        <!-- 多值输入列表 -->
        <CollectionView ItemsSource="{Binding InputItems}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid ColumnDefinitions="*,Auto" Spacing="10">
                        <Entry Text="{Binding Value, Mode=TwoWay}" Placeholder="请输入值"/>
                        <Button Grid.Column="1" Text="×" 
                                Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=RemoveValueCommand}"
                                CommandParameter="{Binding}"
                                BackgroundColor="#dc3545" TextColor="White" WidthRequest="40"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <!-- 添加按钮 -->
        <Button Text="+" Command="{Binding AddNewValueCommand}"
                BackgroundColor="#28a745" TextColor="White"
                HorizontalOptions="Center" WidthRequest="60" HeightRequest="60"
                CornerRadius="30"/>
    </StackLayout>
</ContentPage>

这个方案的好处是：

• 数据和视图完全分离，符合MVVM模式
• 自动处理UI更新（因为用了ObservableCollection）
• 支持添加和删除，用户体验友好

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