我正在使用stack
小部件在图像上显示后退箭头按钮。它的显示但问题是它不可点击意味着 Gesurededector 不在堆栈上工作。
我的代码
Stack(
children: <Widget>[
Container(
height: height * 0.4,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/place2.jpg',
),
fit: BoxFit.fill,
),
),
),
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => print("first container"),
child: Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(left: width * 0.03),
padding: EdgeInsets.only(top: statusBarHeight * 2),
child: Icon(
Icons.arrow_back_ios,
size: 25,
color: Colors.white,
),
),
),
),
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(top: height * 0.3),
child: SingleChildScrollView(
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: height * 0.05,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'NYC Food Festival',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.calendar_today,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'Sat, May 25, 2020',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.attach_money,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'25,000 PKR',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Snaps',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
child: Column(
children: <Widget>[
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
items: imageSliders,
),
],
)),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'About',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
padding: EdgeInsets.only(
right: width * 0.03, left: width * 0.03),
child: DescriptionTextWidget(
text:
"Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.")
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Included',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
],
),
),
),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 100,
decoration: BoxDecoration(
// color: Color.fromARGB(110, 255, 255, 255),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
gradient: LinearGradient(
colors: [
Color.fromARGB(30, 255, 255, 255),
Color.fromARGB(255, 255, 255, 255),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Center(
child: InkWell(
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 80,
vertical: 20,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.blueAccent,
),
child: Text(
"BOOK NOW",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
),
),
onTap: () {
return print("Tap");
},
),
),
),
),
],
)
Run Code Online (Sandbox Code Playgroud)
我需要在导航时将它用作后退按钮,但它不起作用然后进行测试我只是打印一个值 onTap 但它也不起作用我也尝试添加behaviour
。
您可以尝试将 GestureDectector 放在堆栈中的 SingleChildScrollView 之后。
我猜 SingleChildScrollView 位于 GestureDetector 之上,因为它是一个堆栈。
SingleChildScrollView(),
GestureDetector(),
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
1745 次 |
最近记录: |