android - Flutter 天气应用中的城市选择 - Flutter
问题描述
希望你做得好我是一个新手,我正在开发一个基本的天气应用程序作为初学者。现在,不知何故一切都好,除了城市名称。我不知道如何实现城市搜索功能并根据位置从 api 获取数据。在我的代码中,我手动定义了城市名称。这是我的代码:
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:hava_chitor/Carousel.dart';
import 'package:hava_chitor/UnderCarousel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var temp;
var name;
var humidity;
var description;
var city = 'London';
CarouselController buttonCarouselController = CarouselController();
Future getWeather() async {
http.Response response = await http.get(
"http://api.openweathermap.org/data/2.5/weather?q=$city&units=metric&appid=apikey");
var results = jsonDecode(response.body);
setState(() {
this.temp = results['main']['temp'];
this.name = results['name'];
this.humidity = results['main']['humidity'];
this.description = results['weather'][0]['main'];
});
}
@override
void initState() {
super.initState();
this.getWeather();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hava Chitor?',
theme: ThemeData(
primaryColor: Color(0xff424242),
),
home: Scaffold(
drawer: Drawer(),
appBar: AppBar(
actions: [
Padding(
padding: const EdgeInsets.all(15),
child: GestureDetector(
onTap: () {
print('kir');
},
child: Icon(
Icons.add_circle_outline,
color: Color(0xff5d5f64),
),
),
)
],
backgroundColor: Colors.transparent,
elevation: 0,
iconTheme: IconThemeData(color: Color(0xff5d5f64)),
title: Text(
'Hava Chitor?',
style: TextStyle(
color: Color(0xff5d5f64),
fontFamily: 'Sans',
fontWeight: FontWeight.w700),
),
centerTitle: true,
),
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 1.0),
child: Column(
children: [
Carousel(name),
UnderCarousel(temp, description, humidity),
],
),
),
),
);
}
}
解决方案
您需要添加一个 TextField 和一个 TextFieldController 并在用户写完城市名称后调用函数 getWeather,如下所示
String city;
TextEditingController textEditingController = TextEditingController();
TextField(
controller: textEditingController,
onSubmitted: (value){
city = textEditingController.text;
getWeather();
},
),
推荐阅读
- powershell - 添加打印机 -ConnectionName $printer; 给出错误不能包含'\'字符。如何在此处正确使用连接名称?
- javascript - 如果 JavaScript 中的 var 定义了两次,解释器应该采用哪个定义?
- c# - C# CSV Filehelpers 比较同一文件中的两行,添加和删除行
- c - 使用 C 预处理器生成多个类似的函数
- odata - $expand=manager 不展开管理器
- salesforce - Episerver Salesforce 连接器配置保存在哪里?
- php - 为什么 PHP 中的这个 $_SERVER['SERVER_NAME'] 代码给了我错误?
- typescript - 如何设计构建后配置的 vue-cli 应用程序?
- sql-server - 在 MS SQL Server 中查询存储过程的引用
- css - 使用 flexbox 将内容高度动态调整为窗口高度