我需要的：
單擊搜索欄 => 影片搜索欄移動，如圖所示
我試過的：
目前，我正在使用 Navigator push，但效果并不像我想要的那樣流暢。很想知道是否有可能達到上面顯示的預期效果以及如何做到這一點。謝謝！
在應用欄中：
InkWell(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
alignment: Alignment.centerLeft,
width: MediaQuery.of(context).size.width * 0.80,
height: 35,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 5)
],
),
child: Row(
children: [
Icon(Icons.search, size: 25, color: Colors.grey),
SizedBox(width: 5),
Text('Search for Food, Drinks, Items',
style: TextStyle(
color: Colors.black,
fontFamily: 'Poppins',
fontSize: 12))
],
),
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (_) => SearchPage()),
);
},
)
SearchPage.dart
class SearchPage extends StatelessWidget {
const SearchPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
foregroundColor: Colors.black,
backgroundColor: Colors.white,
// The search area here
title: Container(
width: double.infinity,
height: 40,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(5)),
child: Center(
child: TextField(
autofocus: true,
decoration: InputDecoration(
prefixIcon: Icon(Icons.search, color: Colors.black),
suffixIcon: IconButton(
icon: Icon(Icons.clear, color: Colors.black),
onPressed: () {
/* Clear the search field */
},
),
hintText: 'Search...',
border: InputBorder.none),
),
),
)),
);
}
}
uj5u.com熱心網友回復：
您可以使用Hero 影片在螢屏之間制作這些影片。您需要做的是使用Hero小部件將搜索欄包裝在兩個螢屏上，并為其添加一個唯一的 id。
實作起來很簡單，閱讀flutter官方檔案即可。
uj5u.com熱心網友回復：
Flutter 有一個類呼叫SearchDelegate。它是一個小部件，可讓您在應用中實作具有這種效果的搜索功能。
你可以在這里找到它的方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/485443.html
上一篇：如何跳過串列中的元素