listview - Xamarin MVVM 从可绑定的 FlexLayout 中选择项目,类似于在 ListView 上选择项目
问题描述
xamarin 的新手。如何从可绑定的 flexlayout 中选择项目,类似于从列表视图中选择项目?谢谢大家。
ListView 工作完美,但我一直在尝试从 Listview 过渡到 FlexLayout。
这是来自列表视图的逻辑背后的代码。不知道从哪里开始 flexlayout
async void TypeListSelected(object objector, SelectedItemChangedEventArgs eventor)
{
object type = eventor.SelectedItem;
if (type == null)
return;
await Navigation.PushAsync(new EntryPage(new EntryViewModel(type)));
TypesListView.SelectedItem = null;
}
这是带有新的 flex 布局和点击手势的 xaml 页面
<FlexLayout x:Name="FlexTypes"
Wrap="Wrap"
Direction="Row"
HorizontalOptions="FillAndExpand"
JustifyContent="SpaceEvenly"
BindableLayout.ItemsSource="{Binding TypesCollection}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0, 0, 0, 25">
<Frame x:Name="FrameTypes" HasShadow="False"
WidthRequest="125"
BorderColor="#C0C0C0">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TypeListSelected"></TapGestureRecognizer>
</Frame.GestureRecognizers>
<StackLayout x:Name="LayoutTypesList">
<Label>
<Label.FormattedText>
<FormattedString>
<Span FontSize="Subtitle" Text="{Binding Title}"
FontAttributes="Bold"></Span>
</FormattedString>
</Label.FormattedText>
</Label>
<Label FontSize="Small" Text="{Binding Version}"
TextColor="#LELELE"></Label>
<Label Text="{Binding Description}" FontSize="Body"
VerticalOptions="CenterAndExpand"></Label>
<Label FontSize="Caption"
VerticalOptions="CenterAndExpand"
TextColor="#COCOCO">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding fDepartment}"></Span>
<Span Text="{Binding pType}"></Span>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
这是我的视图模型
public ObservableCollection<TypeModel> TypesCollection { get; set; }
public Command LoadTypesCommand { get; set; }
public TypesViewModel()
{
Title = "Browse Types";
TypesCollection = new ObservableCollection<TypeModel>();
LoadTypesCommand = new Command(async () => await ExecuteLoadTypesCommand());
}
async Task ExecuteLoadTypesCommand()
{
if (IsBusy)
return;
IsBusy = true;
try
{
TypesCollection.Clear();
var api = await DataSource.GetTypesApi(true);
foreach (var i in api)
{
TypesCollection.Add(i);
}
}
catch (Exception ex)
{
Debug.WriteLine(ex);
}
finally
{
IsBusy = false;
}
}
解决方案
我制作了一个样本供您参考。
xml:
<FlexLayout
x:Name="FlexTypes"
BindableLayout.ItemsSource="{Binding TypesCollection}"
Direction="Row"
HorizontalOptions="FillAndExpand"
JustifyContent="SpaceEvenly"
Wrap="Wrap">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,0,0,25">
<Frame
x:Name="FrameTypes"
BorderColor="#C0C0C0"
HasShadow="False"
WidthRequest="125">
<Frame.GestureRecognizers>
<TapGestureRecognizer CommandParameter="{Binding id}" Tapped="TypeListSelected" />
</Frame.GestureRecognizers>
<StackLayout x:Name="LayoutTypesList">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
FontSize="Subtitle"
Text="{Binding Title}" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
FontSize="Small"
Text="{Binding Version}"
TextColor="#LELELE" />
<Label
FontSize="Body"
Text="{Binding Description}"
VerticalOptions="CenterAndExpand" />
<Label
FontSize="Caption"
TextColor="#COCOCO"
VerticalOptions="CenterAndExpand">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding fDepartment}" />
<Span Text="{Binding pType}" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
页面.xaml.cs
public partial class Page1 : ContentPage
{
public ObservableCollection<TypeModel> TypesCollection { get; set; }
public Page1()
{
InitializeComponent();
TypesCollection = new ObservableCollection<TypeModel>()
{
new TypeModel(){ id=1, Title="ATitle", Version="A-01", Description="A-01-Description", fDepartment="a-f", pType="a-p"},
new TypeModel(){ id=2, Title="BTitle", Version="B-01", Description="B-02-Description", fDepartment="b-f", pType="b-p"},
};
this.BindingContext = this;
}
private void TypeListSelected(object sender, EventArgs e)
{
TypeModel SelectedItem = TypesCollection.FirstOrDefault(itm => itm.id == Convert.ToInt32(((TappedEventArgs)e).Parameter.ToString()));
if (SelectedItem != null)
{
//do something you want
DisplayAlert("Data", "Title : " + SelectedItem.Title + " , Version : " + SelectedItem.Version, "OK");
}
//object type = e.SelectedItem;
//if (type == null)
// return;
//await Navigation.PushAsync(new EntryPage(new EntryViewModel(type)));
//TypesListView.SelectedItem = null;
}
}
public class TypeModel
{
public int id { get; set; }
public string Title { get; set; }
public string Version { get; set; }
public string Description { get; set; }
public string fDepartment { get; set; }
public string pType { get; set; }
}
推荐阅读
- shiny - 不在shinydashboard的menusubItems中显示图表(使用highcharter)
- sql - SQL:在多级 JOIN 中聚合来自不同行的字符串值
- javascript - 为什么我的异步函数在早先的承诺被履行之前被执行?
- android - 有什么方法可以使用最小 SDK 小于 21 的 Android CameraX API?
- docker - log4j2 运行时配置 - 在集群/docker 环境中
- bash - 如何转换 3rd 方应用程序输出的编码?
- sql - 如何在单个 SELECT 查询中获取用户今天和本月的活动计数
- cassandra - nodetool tablestats Space used (live) 是否给出了集群上表的总大小或执行的节点上表的总大小?
- html - 如何使 figcaption 不移动图像?
- react-native - React Native – FlatList 滚动到底部,键盘向上