flutter - 搜索页面上的颤动动画文本字段
问题描述
我正在创建自定义搜索页面。当这个页面打开时,汉堡菜单被隐藏并且搜索文本字段立即改变大小。如何让它顺利进行?
现在我制作这段代码
class DefaultAppBar extends StatefulWidget implements PreferredSizeWidget {
@override
Size get preferredSize => Size.fromHeight(56.0);
@override
_DefaultAppBarState createState() => _DefaultAppBarState ();
}
class _DefaultAppBarState extends State<DefaultAppBar> with TickerProviderStateMixin {
AnimationController _controller;
double textWidth = 300.0;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
var future = new Future.delayed(const Duration(milliseconds: 100), ()=>setState(() {
textWidth = 400.00;
}));
return Stack(
children: [
Scaffold(
appBar:AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
// ...
title:AnimatedContainer (
duration: Duration (milliseconds: 500),
width: loginWidth,
// color: Colors.red,
child: TextField(
autofocus: true,
// ...
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
prefixIcon: Icon(Icons.arrow_back,color: Colors.grey),
hintText: 'Search something ...',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
contentPadding: EdgeInsets.zero,
// border: InputBorder.none,
// hintText: "My Custom Search Label", // KEY PROP
hintStyle: TextStyle(color: Colors.red), // KEY PROP
),
),
),
),
)
]
);
}
}
并得到这个结果
工作,但不是很顺利以及如何自动计算 textWidth 的开始和结束以及如何制作像这样的动画https://photos.app.goo.gl/mWpdsouLi4csptKb7
解决方案
您可以使用searchDelegate,您需要创建一个扩展 SearchDelegate 类的新类。希望这是您qst的正确答案;这是您应该创建的类的示例:
class CustomSearchDelegate extends SearchDelegate {
@override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: () {
query = '';
},
),
];
}
@override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
close(context, null);
},
);
}
@override
Widget buildResults(BuildContext context) {
if (query.length < 3) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"Search term must be longer than two letters.",
),
)
],
);
}
//Add the search term to the searchBloc.
//The Bloc will then handle the searching and add the results to the searchResults stream.
//This is the equivalent of submitting the search term to whatever search service you are using
InheritedBlocs.of(context)
.searchBloc
.searchTerm
.add(query);
return Column(
children: <Widget>[
//Build the results based on the searchResults stream in the searchBloc
StreamBuilder(
stream: InheritedBlocs.of(context).searchBloc.searchResults,
builder: (context, AsyncSnapshot<List<Result>> snapshot) {
if (!snapshot.hasData) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child: CircularProgressIndicator()),
],
);
} else if (snapshot.data.length == 0) {
return Column(
children: <Widget>[
Text(
"No Results Found.",
),
],
);
} else {
var results = snapshot.data;
return ListView.builder(
itemCount: results.length,
itemBuilder: (context, index) {
var result = results[index];
return ListTile(
title: Text(result.title),
);
},
);
}
},
),
],
);
}
@override
Widget buildSuggestions(BuildContext context) {
// This method is called everytime the search term changes.
// If you want to add search suggestions as the user enters their search term, this is the place to do that.
return Column();
}
}
推荐阅读
- node.js - Typescript + nodemon + VS Code 与声明合并一起工作
- python-3.x - TypeError:('关键字参数不理解:','培训')
- javascript - 将 Font Awesome 与 Aurelia 和 npm 一起使用...找不到模块
- cloudflare-workers - Cloudflare Worker 为客户端超时,但所有工作都已完成并且没有给出超时错误(使用 console.log/`wrangler tail` 进行检查)
- python - ImportError:无法从“预处理器”导入名称“TwitterPreprocessor”
- javascript - 从不同的地方访问 JS 变量