久等了凹蜈，今天講Xamarin.Forms里的核心——數(shù)據(jù)綁定，是將數(shù)據(jù)綁定到對應(yīng)的view上泼橘，實現(xiàn)cs文件與XML文件的數(shù)據(jù)流通饲宿。今天普通的數(shù)據(jù)綁定我不做講解厦酬，今天只講個最復(fù)雜的，就是將接口解析的數(shù)據(jù)為模型數(shù)組瘫想，再將模型數(shù)組映射到對應(yīng)的ListView上仗阅。下面就來逐一講解。
1国夜、新建數(shù)據(jù)模型##
根據(jù)接口的數(shù)據(jù)返回值新建對應(yīng)的模型减噪。
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; }
}
[JsonProperty("XXXX")]是為了解析數(shù)據(jù)能映射到模型對應(yīng)的屬性上去，所以盡量讓模型屬性名與Json里數(shù)據(jù)值對應(yīng)的“key”名字保持一致车吹。
2筹裕、調(diào)接口，獲取數(shù)據(jù)##
這里網(wǎng)絡(luò)使用的是httpclient窄驹，請不要使用request朝卒，因為request里有些方法已經(jīng)不再使用。
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;
}
這里是在界面剛開始加載時調(diào)用接口乐埠，我們只需要看最后兩行代碼
var converted = JsonConvert.DeserializeObject<JFCustomers>(jsonString);
customerListView.ItemsSource = converted.Items;
第一行是將json解析成模型數(shù)組抗斤，第二行是將模型數(shù)組給ListView的ItemsSource囚企，這樣我們就完成了宏觀的數(shù)據(jù)綁定，我們還需要將模型里的各個數(shù)據(jù)放到對應(yīng)的view里展示瑞眼。
3龙宏、模型屬性分發(fā)給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 = "投資產(chǎn)品(個)"
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);
}
這樣你就可以拿到你所點擊那一行秸歧。
結(jié)語#
本人才疏學(xué)淺厨姚，如有描述不對的地方望大神指正。還有Xamarin目前似乎不在維護键菱，請小心跳坑谬墙，個人認為拿來做小應(yīng)用是可以的，大型應(yīng)用最好還是尋找別的解決方案经备。謝謝拭抬。
