如何添加创建新容器的搜索栏 -Flutter
Posted
技术标签:
【中文标题】如何添加创建新容器的搜索栏 -Flutter【英文标题】：How to add a searcher bar that creates new containers -Flutter 【发布时间】：2021-09-18 15:29:20 【问题描述】：如何添加搜索选项，感谢点击后会添加一个新容器，目前点击后的代码在底部创建了一个新容器，但我还需要增加此选项并添加搜索选项。
在这种情况下，我是否必须结合点击和搜索选项来创建新容器？
我是 Flutter 的新手，任何帮助都会很有价值。
class ProfileView3 extends StatefulWidget
const ProfileView3(Key? key) : super(key: key);
@override
_ProfileView3State createState() => _ProfileView3State();
static Route<void> route()
return MaterialPageRoute<void>(builder: (_) => ProfileView3());
class _ProfileView3State extends State<ProfileView3>
Widget _profilePage(BuildContext context)
return SafeArea(
child: Center(
child: Column(
children: [
_Text_2(),
_buildValues(),
_Text_4(),
_buildPickeds()
],
),
),
);
// );
List<String> values = [
'Lion',
'Tiger',
'Flaming',
];
List<String> pickedValues = [];
Widget _buildValues()
return Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
spacing: 8.0,
// line interval
runSpacing: 8.0,
children: values
.map(
(value) => GestureDetector(
onTap: ()
if (pickedValues.contains(value))
//delete when click part of value
//
// pickedValues.remove(value);
else
pickedValues.add(value);
setState(() );
,
child: Container(
decoration: const BoxDecoration(
color: Colors.deepPurpleAccent,
borderRadius: BorderRadius.all(Radius.circular(5.0))),
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
child: Text(
value,
style: TextStyle(color: Colors.white),
// fontWeight: FontWeight.bold
),
),
),
)
.toList(),
),
],
),
);
Widget _buildPickeds()
return Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Wrap(
spacing: 8.0,
// line interval
runSpacing: 8.0,
children: pickedValues
.map(
(value) => GestureDetector(
onTap: ()
if (pickedValues.contains(value))
pickedValues.remove(value);
else
pickedValues.add(value);
setState(() );
,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
border: Border.all(
color: Colors.purpleAccent, // set border color
width: 1.5),
borderRadius: BorderRadius.all(Radius.circular(5.0))),
padding: const EdgeInsets.symmetric(
horizontal: 5,
vertical: 5,
),
child: RichText(
text: TextSpan(
style: Theme.of(context).textTheme.body1,
children: [
const WidgetSpan(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 2.0),
child: Icon(Icons.check),
),
),
TextSpan(text: value),
const WidgetSpan(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 2.0),
child: Icon(Icons.close),
),
),
],
),
)
),
),
)
.toList(),
),
],
),
);
【问题讨论】：
【参考方案1】：这是一个例子。
import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget
const SearchPage(Key key) : super(key: key);
@override
_SearchPageState createState() => _SearchPageState();
class _SearchPageState extends State<SearchPage>
List<String> values = [
'Hello',
'Hello2',
'Hello3',
];
List<String> pickedValues = [];
TextEditingController controller;
@override
void initState()
super.initState();
controller = TextEditingController();
@override
void dispose()
super.dispose();
controller.dispose();
@override
Widget build(BuildContext context)
return Scaffold(
body: Center(
child: SizedBox(
width: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildValues(),
const SizedBox(
height: 30,
),
_buildSearchBar(),
const SizedBox(
height: 30,
),
_buildPickedValues(),
],
),
),
),
);
Widget _buildValues()
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: values
.map(
(value) => Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
color: Colors.blueGrey,
child: Text(
value,
),
),
)
.toList(),
);
Widget _buildSearchBar()
return TextFormField(
controller: controller,
onFieldSubmitted: search,
decoration: InputDecoration(
hintText: 'Search',
fillColor: Colors.white,
filled: true,
isDense: true,
suffixIcon: GestureDetector(
onTap: ()
search(controller.text);
,
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
child: Icon(
Icons.search,
size: 30,
),
),
),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
borderSide: BorderSide(
width: 1,
color: Colors.blueAccent,
),
),
disabledBorder: InputBorder.none,
border: InputBorder.none,
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
borderSide: BorderSide(
width: 1,
color: Colors.grey,
),
),
errorBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
borderSide: BorderSide(
width: 1,
color: Colors.red,
),
),
),
);
void search(String query)
final _formatQuery = query.toLowerCase();
final _formatPickedValues = pickedValues
.map(
(e) => e.toLowerCase(),
)
.toList();
final _formatValues = values
.map(
(e) => e.toLowerCase(),
)
.toList();
if (!_formatPickedValues.contains(_formatQuery) &&
_formatValues.contains(_formatQuery))
pickedValues.add(query);
setState(() );
Widget _buildPickedValues()
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: pickedValues
.map(
(value) => GestureDetector(
onTap: ()
pickedValues.remove(value);
setState(() );
,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
color: Colors.blueAccent,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
value,
),
const SizedBox(
width: 4,
),
const Icon(
Icons.close,
size: 20,
),
],
),
),
),
)
.toList(),
);
【讨论】：
如果我想添加一个额外的列表？哪个会包含更多的动物？只在搜索中看到？怎么做？当我还想为它们创建容器时？ @azeter09 你什么意思？您需要在两个列表中搜索吗？ 一个列表显示可以通过单击选择的最受欢迎的列表，另一个列表将在搜索后创建更多动物可供选择/搜索和容器。 似乎新列表将链接到搜索小部件并且它会起作用:)以上是关于如何添加创建新容器的搜索栏 -Flutter的主要内容，如果未能解决你的问题，请参考以下文章