[英]Making a search bar in Flutter
我做了一个搜索栏,看起来像这样
这是完整的代码
import 'package:flutter/material.dart';
class SearchInput extends StatefulWidget {
@override
State<SearchInput> createState() => _SearchInputState();
}
class _SearchInputState extends State<SearchInput> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 25, left: 25, right: 25),
child: Column(
children: [
Row(
children: [
Flexible(
flex: 1,
child: TextField(
cursorColor: Colors.grey,
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide.none
),
hintText: 'Search',
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 18
),
prefixIcon: Container(
padding: EdgeInsets.all(15),
child: Image.asset('assets/icons/search.png'),
width: 18,
)
),
),
),
Container(
margin: EdgeInsets.only (left: 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(15)
),
child: Image.asset(
'assets/icons/filter.png'),
width: 25
),
],
)
],
),
);
}
}
我不知道如何具体解释,当我按下搜索框导致另一个新页面时,我能以某种方式编码吗?例如这个?
还是有另一种方法来实现它? 如果可能的话,请逐步解释如何操作。
尝试使用readOnly: true
并将onTap
方法覆盖到 go 下一个搜索屏幕
TextField(
readOnly: true,
onTap: () {
//Go to the next screen
},
cursorColor: Colors.grey,
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.