flutter学习日记之ListView,网络请求动态更新listview

 

在Android中通常都会用到listview.那么flutter里面怎么用呢.

在flutter官网文档可以看见对listview介绍:

在Android ListView中，您可以创建一个适配器，然后您可以将它传递给ListView，该适配器将使用适配器返回的内容来展示每一行。 然而，你必须确保在合适的时机回收行，否则，你会得到各种疯狂的视觉和内存问题。

在Flutter中，由于Flutter的不可变的widget模型，将一个Widgets列表传递给的ListView，而Flutter将负责确保它们快速平滑地滚动。

你可以直接new listview():

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new ListView(children: _getListData()),
    );
  }

  _getListData() {
    List widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(new Padding(padding: new EdgeInsets.all(10.0), child: new Text("Hello, world.")));
    }
    return widgets;
  }

或者通过listview.Builder():当你拥有大量数据李列表时,它会自动为您回收列表元素.

 body: ListView.builder(
            itemCount: list == null ? 0 : list.length,
            itemBuilder: (BuildContext context, int position) {
              return _getListDate(context, position);
            }),
      ),

itemCount表示长度相当于AndroidAdapter的getCount().

itemBuilder()里面返回当前position下的视图.

_getListDate返回视图.相当于Android adapter的getview().

  Widget _getListDate(BuildContext context, int position) {
    if (list != null) {
        return GestureDetector(
          onTap: () {
            showMessage(list[position]);
          },
          child: Center(
              child: new Container(
                  width: getScreenWidth(context),
                  decoration: BoxDecoration(
                    color: Colors.white,
                  ),
                  margin: EdgeInsets.only(top: 2.0),
                  padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
                  child: Center(child: new Text(list[position])))),
        );
    }
  }

如果从接口拿数据一开始我们的itemCount很定是0,那么要去请求接口拿数据刷新UI了.

网络请求我用的是flutter的HttpClient();这里需要导包 import 'dart:io';

 _getdata() async {
    if (list != null) {
      return;
    }
   // 创建一个HTTP client
    var httpClient = new HttpClient();
    //创建一个url Uri.http();这里指定的是http请求,也可以https.可以看见第一个参数给的时候没有加上http://,加了会报错.第三个参数带上了请求Parameter.
    var url = new Uri.http('api.xxx.xxx', '/config/profession',
        {'accessToken': 'xxxxxxxxxxxx'});
    var requset = await httpClient.getUrl(url);
    var close = await requset.close();
    var boby = await close.transform(UTF8.decoder).join();
    //JSON解析拿到数据.
    Map mapJson = JSON.decode(boby);
    //拿到listview列表的数据.
    list = mapJson['data'];
    print(JSON.decode(boby));
    //更新视图.
    setState(() {});
  }

到这里一个简单的通过网络请求动态更新listview基本实现了.