需要有关 showModalTopSheet 的帮助
Need help for a showModalTopSheet
我希望能够在 booking.com 网站
上实施 showModalTopSheet
在第一张图片 (img1) 上，已经执行了搜索。搜索条件包含在输入按钮中。
通过单击此按钮，我可以进行更详细的搜索。(img2)
img1
img2
您是否尝试过使用堆栈小部件作为父级并为顶部搜索和过滤器部分制作一个单独的小部件。并为过滤器创建一个布尔状态。所以当进行搜索时，状态将变为真。
因此尝试使用堆栈作为父项，将酒店列表作为第一个子项，将搜索文本框作为第二个子项，容器具有填充和对齐 属性 作为 Alignment.topCenter并使堆栈适合 属性 为 StackFit.loose .
下面是实现上述建议的示例代码。
Link 示例工作图像和视频。
https://drive.google.com/drive/folders/1BrEtcQCg8VEN7WQgXUorBc34R04gipAA?usp=sharing
import 'package:flutter/material.dart';
class SampleWidget extends StatefulWidget {
const SampleWidget({Key? key}) : super(key: key);
@override
State<SampleWidget> createState() => _SampleWidgetState();
}
class _SampleWidgetState extends State<SampleWidget>
with TickerProviderStateMixin {
late TabController _tabController;
bool _isFilterEnabled = false;
@override
void initState() {
_tabController = new TabController(length: 3, vsync: this, initialIndex: 0);
super.initState();
}
TabBar getTabBar() {
return TabBar(
indicatorColor: Colors.white,
controller: _tabController,
tabs: [
Container(
padding: EdgeInsets.only(top: 20),
height: 65,
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Icon(
Icons.import_export,
color: Colors.grey,
),
Text(
"Trier",
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
Container(
padding: const EdgeInsets.only(top: 20),
height: 50,
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Icon(
Icons.tune,
color: Colors.grey,
),
Text(
"Filter",
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
Container(
padding: const EdgeInsets.only(top: 20),
height: 50,
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Icon(
Icons.map,
color: Colors.grey,
),
Text(
"Carte",
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
],
);
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: const Color(0xFF013580),
bottom: PreferredSize(
preferredSize: getTabBar().preferredSize,
child: ColoredBox(
color: Colors.white,
child: getTabBar(),
),
),
),
body: TabBarView(
controller: _tabController,
children: [
ListView.builder(
itemBuilder: (index, context) => const ListTile(
leading: Icon(Icons.abc),
),
itemCount: 20,
),
ListView.builder(
itemBuilder: (index, context) => const ListTile(
leading: Icon(Icons.access_alarm),
),
itemCount: 20,
),
ListView.builder(
itemBuilder: (index, context) => const ListTile(
leading: Icon(Icons.ac_unit),
),
itemCount: 20,
)
],
),
),
Material(
color: Colors.transparent,
child: InkWell(
splashColor: Colors.transparent,
onTap: () {
print("container is pressed");
setState(() {
_isFilterEnabled = !_isFilterEnabled;
});
},
child: Container(
height: 60,
child: Row(
children: const [
Icon(
Icons.chevron_left,
color: Colors.grey,
),
SizedBox(width: 20),
Text(
"Sample Text text",
style: TextStyle(
color: Colors.grey,
fontSize: 18,
decoration: TextDecoration.none,
),
)
],
),
margin: const EdgeInsets.only(
left: 20, right: 20, bottom: 20, top: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.amber, width: 4),
),
),
),
),
if (_isFilterEnabled)
Material(
elevation: 5,
color: Colors.transparent,
child: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
onTap: () {
setState(() {
_isFilterEnabled = !_isFilterEnabled;
});
},
child: Icon(
Icons.close,
),
),
Text(
"Modifiez Votre recherche",
style: TextStyle(
color: Colors.black,
fontSize: 20,
decoration: TextDecoration.none,
fontWeight: FontWeight.w600),
)
],
),
const SizedBox(height: 10),
Container(
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.amber, width: 4),
),
child: Column(
children: [
Container(
padding: const EdgeInsets.only(
top: 8,
bottom: 5,
),
child: Row(
children: const [
SizedBox(width: 10),
Icon(Icons.search),
SizedBox(width: 10),
Text("France")
],
),
),
const Divider(color: Colors.black38),
Container(
padding: const EdgeInsets.only(
top: 8,
bottom: 5,
),
child: Row(
children: const [
SizedBox(width: 10),
Icon(Icons.search),
SizedBox(width: 10),
Text("France")
],
),
),
const Divider(color: Colors.black38),
Container(
padding: const EdgeInsets.only(
top: 8,
bottom: 8,
),
child: Row(
children: const [
SizedBox(width: 10),
Icon(Icons.search),
SizedBox(width: 10),
Text("France")
],
),
),
Container(
color: Color(0xFF0171c2),
height: 50,
width: double.infinity,
child: const Center(
child: Text(
" Recharge",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
)
],
),
),
const SizedBox(height: 10),
],
),
),
)
],
);
}
}
我希望能够在 booking.com 网站
上实施 showModalTopSheet在第一张图片 (img1) 上，已经执行了搜索。搜索条件包含在输入按钮中。 通过单击此按钮，我可以进行更详细的搜索。(img2)
img1
img2
您是否尝试过使用堆栈小部件作为父级并为顶部搜索和过滤器部分制作一个单独的小部件。并为过滤器创建一个布尔状态。所以当进行搜索时，状态将变为真。
因此尝试使用堆栈作为父项，将酒店列表作为第一个子项，将搜索文本框作为第二个子项，容器具有填充和对齐 属性 作为 Alignment.topCenter并使堆栈适合 属性 为 StackFit.loose .
下面是实现上述建议的示例代码。
Link 示例工作图像和视频。
https://drive.google.com/drive/folders/1BrEtcQCg8VEN7WQgXUorBc34R04gipAA?usp=sharing
import 'package:flutter/material.dart';
class SampleWidget extends StatefulWidget {
const SampleWidget({Key? key}) : super(key: key);
@override
State<SampleWidget> createState() => _SampleWidgetState();
}
class _SampleWidgetState extends State<SampleWidget>
with TickerProviderStateMixin {
late TabController _tabController;
bool _isFilterEnabled = false;
@override
void initState() {
_tabController = new TabController(length: 3, vsync: this, initialIndex: 0);
super.initState();
}
TabBar getTabBar() {
return TabBar(
indicatorColor: Colors.white,
controller: _tabController,
tabs: [
Container(
padding: EdgeInsets.only(top: 20),
height: 65,
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Icon(
Icons.import_export,
color: Colors.grey,
),
Text(
"Trier",
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
Container(
padding: const EdgeInsets.only(top: 20),
height: 50,
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Icon(
Icons.tune,
color: Colors.grey,
),
Text(
"Filter",
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
Container(
padding: const EdgeInsets.only(top: 20),
height: 50,
child: Tab(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Icon(
Icons.map,
color: Colors.grey,
),
Text(
"Carte",
style: TextStyle(
color: Colors.grey,
),
),
],
),
),
),
],
);
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: const Color(0xFF013580),
bottom: PreferredSize(
preferredSize: getTabBar().preferredSize,
child: ColoredBox(
color: Colors.white,
child: getTabBar(),
),
),
),
body: TabBarView(
controller: _tabController,
children: [
ListView.builder(
itemBuilder: (index, context) => const ListTile(
leading: Icon(Icons.abc),
),
itemCount: 20,
),
ListView.builder(
itemBuilder: (index, context) => const ListTile(
leading: Icon(Icons.access_alarm),
),
itemCount: 20,
),
ListView.builder(
itemBuilder: (index, context) => const ListTile(
leading: Icon(Icons.ac_unit),
),
itemCount: 20,
)
],
),
),
Material(
color: Colors.transparent,
child: InkWell(
splashColor: Colors.transparent,
onTap: () {
print("container is pressed");
setState(() {
_isFilterEnabled = !_isFilterEnabled;
});
},
child: Container(
height: 60,
child: Row(
children: const [
Icon(
Icons.chevron_left,
color: Colors.grey,
),
SizedBox(width: 20),
Text(
"Sample Text text",
style: TextStyle(
color: Colors.grey,
fontSize: 18,
decoration: TextDecoration.none,
),
)
],
),
margin: const EdgeInsets.only(
left: 20, right: 20, bottom: 20, top: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.amber, width: 4),
),
),
),
),
if (_isFilterEnabled)
Material(
elevation: 5,
color: Colors.transparent,
child: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
InkWell(
onTap: () {
setState(() {
_isFilterEnabled = !_isFilterEnabled;
});
},
child: Icon(
Icons.close,
),
),
Text(
"Modifiez Votre recherche",
style: TextStyle(
color: Colors.black,
fontSize: 20,
decoration: TextDecoration.none,
fontWeight: FontWeight.w600),
)
],
),
const SizedBox(height: 10),
Container(
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.amber, width: 4),
),
child: Column(
children: [
Container(
padding: const EdgeInsets.only(
top: 8,
bottom: 5,
),
child: Row(
children: const [
SizedBox(width: 10),
Icon(Icons.search),
SizedBox(width: 10),
Text("France")
],
),
),
const Divider(color: Colors.black38),
Container(
padding: const EdgeInsets.only(
top: 8,
bottom: 5,
),
child: Row(
children: const [
SizedBox(width: 10),
Icon(Icons.search),
SizedBox(width: 10),
Text("France")
],
),
),
const Divider(color: Colors.black38),
Container(
padding: const EdgeInsets.only(
top: 8,
bottom: 8,
),
child: Row(
children: const [
SizedBox(width: 10),
Icon(Icons.search),
SizedBox(width: 10),
Text("France")
],
),
),
Container(
color: Color(0xFF0171c2),
height: 50,
width: double.infinity,
child: const Center(
child: Text(
" Recharge",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
)
],
),
),
const SizedBox(height: 10),
],
),
),
)
],
);
}
}