Question

我希望每次单击按钮时都显示一行新的TextView。我正在使用MvvmCross，我知道我应该使用分配给布局模板的MvxListView，但我不知道如何在按钮点击时在屏幕上显示它。

有人能给我一个简单的代码示例，说明从ViewModel执行此操作，以及关于启动新TextView显示的代码行的简短说明吗？

更新

我在下面提供了我的代码：

ViewModel.cs

public class FirstViewModel 
    : MvxViewModel
{
    private ObservableCollection<Unit> unitCodes;
    public ObservableCollection<Unit> UnitCodes
    {
        get { return unitCodes; }
        set { unitCodes = value; RaisePropertyChanged(() => UnitCodes); }
    }

    public IMvxCommand ButtonCommand { get; private set; }
    public FirstViewModel()
    {
        unitCodes = new ObservableCollection<Unit>();
        ButtonCommand = new MvxCommand(() =>
        {
            UnitCodes = UnitCodes ?? new ObservableCollection<Unit>();
            UnitCodes.Add(new Unit("123", "Test Name"));
        });
    }

    public class Unit : MvxViewModel
    {
        private string unitCode;
        public string UnitCode
        {
            get { return unitCode; }
            set { unitCode = value; RaisePropertyChanged(() => UnitCode); }
        }
        private string unitName;
        public string UnitName
        {
            get { return unitName; }
            set { unitName = value; RaisePropertyChanged(() => UnitName); }
        }

        public Unit() { }
        public Unit(string unitCode, string unitName)
        {
            UnitCode = unitCode;
            UnitName = unitName;
        }
    }
}

View.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        local:MvxBind="Click ButtonCommand"
        android:text="Click To Add" />
    <Mvx.MvxListView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        local:MvxItemTemplate="@layout/unitcodeitemlayout"
        local:MvxBind="ItemSource UnitCodes" />
</LinearLayout>

unitcodeitemlayout.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        local:MvxBind="Text UnitName" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        local:MvxBind="Text UnitCode" />
</LinearLayout>

我的代码没有任何编译或运行时错误，但按钮点击没有任何反应。我想要的是每次单击按钮时都会在显示屏上添加“123”和“测试名称”。

Answer 1

你的代码是对的。但是，您错误拼写了ItemsSource axml。{/ p>下的MvxListView

应该是：

<Mvx.MvxListView
     ...
     local:MvxBind = "ItemsSource UnitCodes"/>

Answer 2

要设置ListView，请查看此MvvmCross tutorial

你最终可能会遇到这样的事情：

视图模型：

public class MyListViewModel : MvxViewModel
    {
        private ObservableCollection<TextViewCellViewModel> _listItems;

        public virtual ObservableCollection<TextViewCellViewModel> ListItems {
            get {
                return _listItems;
            }
            set {
                _listItems = value;
                RaisePropertyChanged(() => ListItems);
            }
        }

        private IMvxCommand _addTextViewCommand;

        public IMvxCommand AddTextViewCommand {
            get {
                _addTextViewCommand = _addTextViewCommand ?? new MvxCommand(AddTextView);
                return _addTextViewCommand;
            }
        }


        private void AddTextView()
        {
            ListItems = ListItems ?? new ObservableCollection<TextViewCellViewModel>();

            ListItems.Add(new TextViewCellViewModel());
        }


        public class TextViewCellViewModel : MvxViewModel
        {
            private string _text;
            public string Text { get { return _text; } set { _text = value; RaisePropertyChanged(() => Text); } }

            public TextViewCellViewModel() { }
        }
    }

Android ListView布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="fill_vertical"
    android:paddingRight="20dp"
    android:paddingLeft="20dp">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/frameLayout"
        android:paddingBottom="50dp">
        <MvxListView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scrollbars="vertical"
            android:id="@+id/list_view_tripplanner_result"
            android:divider="@android:color/transparent"
            android:paddingTop="10dp"
            android:clipToPadding="false"
            android:dividerHeight="7dp"
            android:descendantFocusability="afterDescendants"
            local:MvxItemTemplate="@layout/cell_textview"
            local:MvxBind="ItemsSource ListItems;" />
    </FrameLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:paddingTop="5dp"
        android:paddingBottom="10dp">
        <Button
            android:layout_width="match_parent"
            android:layout_height="40dp"
            local:MvxBind="Click AddTextViewCommand"
            android:text="Add TextView"
            android:textColor="@color/primary_white"
            android:background="@android:color/darker_gray" />
    </LinearLayout>
</RelativeLayout>

这应该是这样的:( Listview底部的注意按钮）

@ layout / cell_textview 的位置如下所示：

ListView的ItemTemplate的

布局是：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:textSize="20dp"
        local:MvxBind="Text Text"/>
</LinearLayout>

如何在按钮上的MvxListView上显示新项目在Android Xamarin Visual Studio中单击

2 个答案: