使用Flutter编写应用（三）

最新推荐文章于 2023-10-18 19:36:02 发布

敖森迪

最新推荐文章于 2023-10-18 19:36:02 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter Flutter学习文章标签： Flutter学习 Flutter写应用 Flutter

本文链接：https://blog.youkuaiyun.com/A_sendy/article/details/88316905

Flutter 同时被 2 个专栏收录

7 篇文章

订阅专栏

Flutter学习

7 篇文章

订阅专栏

本文是Flutter系列的第三篇，介绍了如何获取城市列表数据并展示。通过创建城市Widget、城市列表，使用ListView组件，结合网络获取数据和刷新流程，实现了简单的城市列表展示。虽然界面简单，但达到了学习目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前两篇实现了从实时天气的界面，这次将分享获取城市列表的数据并展示出来。获取数据和刷新的流程跟天气获取展示是一样的，不一样的是通过本文可以认识新的组件ListView。

开始

1.创建城市Widget

class CityWidget extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new CityListState();
  }
}

2.创建城市列表

class CityListState extends State<CityWidget> {

  @override
  Widget build(BuildContext context) {
      //列表组件
    return ListView.builder(
        //有多少个item
        itemCount: cityList.length,
        itemBuilder: (context, index) {
            //每个item显示的内容
          return ListTile(
              title: Container(
                padding: EdgeInsets.all(5),
                child: Text(cityList[index].name,
                    style: TextStyle(color: Colors.white, fontSize:18)),
                color: Colors.blue,)
          );
        });
   }
   
 }

3.创建城市实体类

class CityData {
  String name;
  CityData({this.name});
}

4.添加网络获取数据并刷新

List<CityData> cityList = new List<CityData>();
//创建时开始发起异步请求
CityListState() {
  _getCityList();
}

_getCityList() async {
  List<CityData> result = await _futureGetCityList();

  setState(() {
    cityList = result;
  });
}

Future<List<CityData>> _futureGetCityList() async {
  //TODO:获取城市列表
  var url = "https://search.heweather.net";
  var httpClient = new HttpClient();
  List<CityData> data = new List<CityData>();
  try {
    var uri = new Uri.http(
        url, '/top', {'key': "mykey", 'group': 'cn'});
    var request = await httpClient.getUrl(uri);

    var response = await request.close();

    if (response.statusCode == HttpStatus.OK) {
      var responseBody = await response.transform(Utf8Decoder()).join();
      var cityJson = await json.decode(responseBody);

      for (dynamic city in cityJson['HeWeather6'][0]['basic']) {
        CityData cityData = CityData(name: city['location']);
        data.add(cityData);
      }
    }
  } catch (exception) {
    print(exception.toString());
  }
  return data;
}

5.修改首页

在WeatherApp中的build方法作显示Widget的修改：


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather App',
//      home: WeatherWidget(),
      home: Scaffold(
        body: CityWidget(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }