本文阅读导航
展开
久等了，今天讲Xamarin.Forms里的核心——数据绑定，是将数据绑定到对应的view上，实现cs文件与XML文件的数据流通。今天普通的数据绑定我不做讲解，今天只讲个最复杂的，就是将接口解析的数据为模型数组，再将模型数组映射到对应的ListView上。下面就来逐一讲解。
1、新建数据模型##
根据接口的数据返回值新建对应的模型。
public class JFCustomers
{
[JsonProperty("list")]
public IEnumerable<JFCustomer> Items { get; set; }
}
public class JFCustomer
{
[JsonProperty("address")]
public string address { get; set; }
[JsonProperty("customerType")]
public string customerType { get; set; }
[JsonProperty("customerTypeView")]
public string customerTypeView { get; set; }
[JsonProperty("id")]
public string id { get; set; }
[JsonProperty("investProductCount")]
public string investProductCount { get; set; }
[JsonProperty("investShareAmountTotal")]
public string investShareAmountTotal { get; set; }
[JsonProperty("investShareTotal")]
public string investShareTotal { get; set; }
[JsonProperty("mobile")]
public string mobile { get; set; }
[JsonProperty("name")]
public string name { get; set; }
}
2、调接口，获取数据##
这里网络使用的是httpclient，请不要使用request，因为request里有些方法已经不再使用。
protected override async void OnAppearing()
{
base.OnAppearing();
int currentPage = 1;
String sequenceName = "investShareAmountTotal";
String uri = JFGobalData.baseUrl + "/api/fund/clients?keyWords=" + searchBar.Text + "&page=" + currentPage + "&pageSize=10&sort=" + sequenceName;
HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Add("X-Auth-Token",urlToken);
var task = await client.GetAsync(uri);
var jsonString = await task.Content.ReadAsStringAsync();
var converted = JsonConvert.DeserializeObject<JFCustomers>(jsonString);
customerListView.ItemsSource = converted.Items;
}
这里是在界面刚开始加载时调用接口，我们只需要看最后两行代码
var converted = JsonConvert.DeserializeObject<JFCustomers>(jsonString);
customerListView.ItemsSource = converted.Items;
第一行是将json解析成模型数组，第二行是将模型数组给ListView的ItemsSource，这样我们就完成了宏观的数据绑定，我们还需要将模型里的各个数据放到对应的view里展示。
3、模型属性分发给View##
这里才是最后的重中之重，我们还是看代码来分析
<ListView x:Name = "customerListView"
SeparatorVisibility = "None"
ItemSelected = "customerListViewItemSelected">
<ListView.RowHeight>
<OnPlatform x:TypeArguments="x:Int32"
iOS="80"
Android="80"
WinPhone="90" />
</ListView.RowHeight>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView>
<Frame OutlineColor = "Accent"
Padding = "5">
<StackLayout Orientation = "Vertical">
<Label Text = "{Binding name}"
FontSize = "18"
TextColor = "Black"
HorizontalOptions = "StartAndExpand"/>
<StackLayout Orientation = "Horizontal">
<Label Text = "客户类别"
FontSize = "12"
TextColor = "Gray"
HorizontalOptions = "StartAndExpand"/>
<Label Text = "{Binding customerType}"
FontSize = "12"
TextColor = "Black"
HorizontalOptions = "StartAndExpand"/>
<Label Text = "投资产品(个)"
FontSize = "12"
TextColor = "Gray"
HorizontalOptions = "StartAndExpand"/>
<Label Text = "{Binding investProductCount}"
FontSize = "12"
TextColor = "Black"
HorizontalOptions = "StartAndExpand"/>
</StackLayout>
<StackLayout Orientation = "Horizontal">
<Label Text = "投资份额(份)"
FontSize = "12"
TextColor = "Gray"
HorizontalOptions = "StartAndExpand"/>
<Label Text = "{Binding investShareTotal}"
FontSize = "12"
TextColor = "Black"
HorizontalOptions = "StartAndExpand"/>
<Label Text = "投资金额(元)"
FontSize = "12"
TextColor = "Gray"
HorizontalOptions = "StartAndExpand"/>
<Label Text = "{Binding investShareAmountTotal}"
FontSize = "12"
TextColor = "Black"
HorizontalOptions = "StartAndExpand"/>
</StackLayout>
</StackLayout>
</Frame>
</ContentView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
其实这里真没有什么可说而
我只说一点
ItemSelected = "customerListViewItemSelected"
这个用来给每一行元素提供点击事件，或许你会问，我怎么知道我点击的是哪一行，下面就给你解答。
4、获取点击的模型##
void customerListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
{
JFCustomerDetailPage customerDetailPage = new JFCustomerDetailPage();
customerDetailPage.customerModel = (JFCustomer)e.SelectedItem;
this.Navigation.PushAsync(customerDetailPage);
}
这样你就可以拿到你所点击那一行。
结语#
本人才疏学浅，如有描述不对的地方望大神指正。还有Xamarin目前似乎不在维护，请小心跳坑，个人认为拿来做小应用是可以的，大型应用最好还是寻找别的解决方案。谢谢
本文转载自Snoopy008，原文链接：https://www.jianshu.com/p/5229274f5391，本文观点不代表江湖人士立场，转载请联系原作者。
