flutter - 如何从 Flutter 的搜索代理中删除飞溅
问题描述
我正在制作我想放在 App Store 上的第一个应用程序。这是一个天气应用程序。将其命名为 Aer,因此请尽快查看!但无论如何,我基本上已经完成了。不过有一件事困扰着我。每当我搜索一个城市(每当我在 SearchDelegate 中返回一个小部件或进出它时)都会发生这种奇怪的飞溅。我的猜测是它与动画有关,但我不知道如何更改它,或者是否是这样。下面是我的代码(小心复制粘贴,因为我做得很快)。我真的很想得到一些帮助来摆脱这个。我还附上了一个 gif,以更好地展示我在说什么。谢谢!
place_search.dart
import 'package:aer/services/places.dart';
import 'package:aer/style.dart';
import 'package:flutter/material.dart';
class AddressSearch extends SearchDelegate<Suggestion> {
AddressSearch(this.sessionToken) {
apiClient = PlaceApiProvider(sessionToken);
}
final sessionToken;
PlaceApiProvider apiClient;
Suggestion firstItem;
List<Suggestion> results;
@override
ThemeData appBarTheme(BuildContext context) {
return ThemeData(
primaryColor: Color.fromRGBO(45, 45, 42, 1.0),
primaryIconTheme: IconThemeData(color: Color.fromRGBO(239, 247, 255, 1.0)),
textTheme: TextTheme(
title: Style.textStyle(size: 24, color: Color.fromRGBO(239, 247, 255, 1.0))
),
inputDecorationTheme: InputDecorationTheme(
hintStyle: Style.textStyle(size: 24, color: Color.fromRGBO(239, 247, 255, 1.0)),
),
cursorColor: Color.fromRGBO(239, 247, 255, 1.0),
);
}
@override
Animation<double> get transitionAnimation => super.transitionAnimation;
@override
TextInputType get keyboardType => TextInputType.name;
@override
List<Widget> buildActions(BuildContext context) {
return [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: IconButton(
tooltip: 'Clear',
icon: Icon(Icons.clear),
onPressed: () {
query = '';
},
),
)
];
}
@override
Widget buildLeading(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: IconButton(
tooltip: 'Back',
icon: Icon(Icons.arrow_back),
onPressed: () {
close(context, null);
},
),
);
}
@override
Widget buildResults(BuildContext context) {
if (query != '' && firstItem != null) {
return Scaffold(
backgroundColor: Color.fromRGBO(45, 45, 42, 1.0),
body: ListView.builder(
itemBuilder: (context, index) => ListTile(
title:
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Text((results[index]).description, style: Style.textStyle(size: 16, color: Color.fromRGBO(239, 247, 255, 1.0))),
),
onTap: () {
close(context, results[index]);
},
),
itemCount: results.length,
),
);
} else {
query = '';
return Scaffold(
backgroundColor: Color.fromRGBO(45, 45, 42, 1.0),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 128.0),
child: Center(child: Text("Oops! We couldn't find that one.\nTry again.", textAlign: TextAlign.center, style: Style.textStyle(size: 20, color: Color.fromRGBO(239, 247, 255, 1.0)))),
)
],
),
);
}
}
@override
Widget buildSuggestions(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(45, 45, 42, 1.0),
body: FutureBuilder(
future: query == ''
? null
: apiClient.fetchSuggestions(
query, Localizations.localeOf(context).languageCode),
builder: (context, snapshot) {
if (snapshot.hasData) {
if (snapshot.data.length != 0) {
firstItem = snapshot.data[0] as Suggestion;
results = snapshot.data;
} else {
firstItem = null;
return Scaffold(
backgroundColor: Color.fromRGBO(45, 45, 42, 1.0),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 128.0),
child: Center(child: Text("Oops! We couldn't find that one.\nTry again.", textAlign: TextAlign.center, style: Style.textStyle(size: 20, color: Color.fromRGBO(239, 247, 255, 1.0)))),
)
],
),
);
}
}
return query == ''
? Container(
)
: snapshot.hasData
? ListView.builder(
itemBuilder: (context, index) => ListTile(
title:
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Text((snapshot.data[index] as Suggestion).description, style: Style.textStyle(size: 16, color: Color.fromRGBO(239, 247, 255, 1.0))),
),
onTap: () {
close(context, snapshot.data[index] as Suggestion);
},
),
itemCount: snapshot.data.length,
)
: Padding(
padding: const EdgeInsets.only(left: 32.0, top: 16.0),
child: Container(child: Text('Loading...', style: Style.textStyle(size: 16, color: Color.fromRGBO(239, 247, 255, 1.0)))),
);
}
),
);
}
}
main.dart (where I call the SearchDelegate)
onTap: () async {
final sessionToken = Uuid().v4();
final Suggestion result = await showSearch(
context: context,
delegate: AddressSearch(sessionToken),
);
if (result != null) {
BlocProvider.of<WeatherBloc>(context).add(
WeatherRequestedByCity(city: (result).description));
RegExp regExp = RegExp('^(.+?),');
String city = regExp.stringMatch((result).description).toString();
if (city != 'null') {
city = city.substring(0, city.length - 1);
} else {
city = (result).description;
}
setState(() {
location = city;
currentPage = 0.0;
});
}
}
解决方案
这里有一个允许动画定制的未解决问题。我建议支持它以帮助提高 Flutter 团队的优先级。
推荐阅读
- html - 通过 excel vba 从复杂网站导入数据
- javascript - turf.nearestPoint 只返回相同的点
- android - 将算法从 Java 转换为 NDK
- firebase - 函数中的 Firebase 消息传递错误
- android - Cordova Plugin 自定义应用程序类
- c# - 禁止对 Visual Studio 中的所有项目发出警告
- jenkins - 增加 Jenkins 注销计时器不起作用
- html - 解析 HTML 表格单元 ID
- javascript - 如何使用 Node js 和 Multer 将保存在文件系统上的文件返回到 Angular 前端?
- javascript - 如何在同一行记录控制台或清除节点中的控制台?