flutter - 有谁知道如何使用类似于 instagram 的标签实现搜索栏?
问题描述
我想知道如何构建一个搜索栏,将用户搜索输入过滤到组或选项卡中,例如人员、标签、地点,就像 instagram 一样,但我不知道该怎么做!
解决方案
它可能看起来像这样:
import 'package:flutter/material.dart';
main() => runApp(
MaterialApp(
// home: Scaffold(
// body: Container(child: SearchButton()),
home: Body()),
);
class Body extends StatefulWidget {
@override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
TextEditingController controller;
@override
void initState() {
super.initState();
controller = TextEditingController();
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
leading: Icon(Icons.search),
title: TextField(
controller: controller,
cursorColor: Colors.white,
style: TextStyle(color: Colors.white),
),
bottom: TabBar(tabs: [
Tab(icon: Icon(Icons.people)),
Tab(icon: Icon(Icons.location_city)),
]),
),
body: TabBarView(children: [Container(), Container()]),
),
);
}
}
推荐阅读
- javascript - 轮监听器在事件发生后获取位置
- sap - SAP Cloud Platform 通过 CF CLI 部署 MTAR
- python - 将文本文件(.obj)数据写入python列表的函数用数据文件中的最后一个元素填充列表
- lotus-notes - 当文档选择不同的状态时如何显示错误。另一个是为什么复选框没有保存
- excel - 如何在 Angular 中将 Excel 模板的设计导入为对象
- python - 如何并行处理同一视频的不同部分?
- powershell - 无法断开连接到 office365 的 powershell 会话
- python - 通过groupby删除大纲熊猫?
- android - 无法使用服务上下文使用材质组件膨胀布局
- json - 有没有办法将 JSON 数据提取到数据标签中以显示在 React Native 的图表中?