我做了一個看起來像這樣的搜索欄
這是完整的代碼
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
),
],
)
],
),
);
}
}
我不知道如何具體解釋它，當我按下搜索框時我可以以某種方式編碼它導致另一個新頁面，例如這個？
或者還有其他方法可以實作嗎？如果可能的話，請逐步解釋如何做到這一點。
uj5u.com熱心網友回復：
嘗試使用readOnly: true和覆寫onTap方法進入下一個搜索螢屏
TextField(
readOnly: true,
onTap: () {
//Go to the next screen
},
cursorColor: Colors.grey,
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/451243.html