- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 ProductDetail 页面上使用了 InteractiveViewer。
但是当我平移和缩放图像时,按钮和文本等其他小部件会覆盖它。
这是我的代码:
class ProductDetail extends StatelessWidget {
final Product product;
ProductDetail({this.product});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Column(
children: [
SizedBox(
height: 20
),
SizedBox(
height: 300,
width: MediaQuery.of(context).size.width -20,
child: InteractiveViewer(
child: Hero(
tag: product.id,
child: Carousel(
autoplay: false,
boxFit: BoxFit.cover,
dotBgColor: Colors.transparent,
dotColor: Colors.black.withOpacity(0.5),
images: [
AssetImage(product.imageUrl),
AssetImage(product.imageUrl),
AssetImage(product.imageUrl),
],
),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width -20,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Text(
'₹ ${product.price}',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Text(
'₹ ${product.price}',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
decoration: TextDecoration.lineThrough,
color: Colors.grey
),
),
],
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(getColorFromHex('#d1d1d1')),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.add_shopping_cart),
Text("Add to Cart", style: TextStyle(fontSize: 18)),
],
),
)
),
SizedBox(
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(getColorFromHex('#56a8e2')),
),
child: Row(
children: [
Icon(Icons.shopping_bag),
Text("Buy Now", style: TextStyle(fontSize: 18)),
],
),
)
),
],
),
),
],
),
),
);
}
}
当我使用 InteractiveViewer 平移或缩放图像时,如何隐藏文本和按钮等其他小部件?
最佳答案
onInteractionStart → void Function(ScaleStartDetails details) : Calledwhen the user begins a pan or scale gesture on the widget.
onInteractionEnd → void Function(ScaleEndDetails details) : Calledwhen the user ends a pan or scale gesture on the widget.
请看下面的代码,我必须做一些修改才能让它工作:
import 'package:carousel_pro/carousel_pro.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ProductDetail(),
),
);
}
}
class ProductDetail extends StatefulWidget {
ProductDetail({products});
@override
_ProductDetailState createState() => _ProductDetailState();
}
class _ProductDetailState extends State<ProductDetail> {
bool _visible = true;
TransformationController controller = TransformationController();
final Products products = Products(
id: 10,
imageUrl:
"https://cdn.pixabay.com/photo/2020/10/01/17/11/temple-5619197_960_720.jpg",
price: 20.00);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Column(
children: [
SizedBox(height: 20),
SizedBox(
height: 300,
width: MediaQuery.of(context).size.width - 20,
child: InteractiveViewer(
transformationController: controller,
onInteractionStart: (scale) {
setState(() => _visible = false);
},
onInteractionEnd: (scale) {
setState(() {
controller.value = Matrix4.identity();
_visible = true;
});
},
child: Hero(
tag: products.id,
child: Carousel(
autoplay: false,
boxFit: BoxFit.cover,
dotBgColor: Colors.transparent,
dotColor: Colors.black.withOpacity(0.5),
images: [
NetworkImage(products.imageUrl),
NetworkImage(products.imageUrl),
NetworkImage(products.imageUrl),
],
),
),
),
),
Visibility(
visible: _visible,
child: SizedBox(
width: MediaQuery.of(context).size.width - 20,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Text(
'₹ ${products.price.toString()}',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.bold),
),
Text(
'₹ ${products.price.toString()}',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
decoration: TextDecoration.lineThrough,
color: Colors.grey),
),
],
),
),
),
),
Visibility(
visible: _visible,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.cyanAccent),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.add_shopping_cart),
Text("Add to Cart", style: TextStyle(fontSize: 18)),
],
),
)),
SizedBox(
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.limeAccent),
),
child: Row(
children: [
Icon(Icons.shopping_bag),
Text("Buy Now", style: TextStyle(fontSize: 18)),
],
),
)),
],
),
),
),
],
),
),
);
}
}
class Products {
final int id;
final String imageUrl;
final double price;
Products({
this.id,
this.imageUrl,
this.price,
});
Products copyWith({
int id,
String imageUrl,
double price,
}) {
return Products(
id: id ?? this.id,
imageUrl: imageUrl ?? this.imageUrl,
price: price ?? this.price,
);
}
}
关于flutter - InteractiveViewer 在平移时不会隐藏其他小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64710204/
我正在尝试基于此示例实现 highcharts 平移: http://jsfiddle.net/HXUmK/5/ 但我希望能够用鼠标左键缩放并用鼠标右键平移。所以我修改了上面的代码并设法让它工作了一点
如何删除 BufferedImage 最左边垂直列的 50px,并将其复制到与原始 BufferedImage 大小相同的新 BufferedImage 中? class TestCopyImage
以下是关于如何绘制机器人的 ARM 和肩膀并通过一些用户输入旋转它们的代码(取自 http://www.glprogramming.com/red/chapter03.html ): glPushMa
我正在使用 Swift/SpriteKit 并在 SKScene 上创建了 map 的宽图像。我正在用代码完成这一切,并希望让用户拖动手指来平移这张超宽的 map 。可以将其想象为幻想世界的老式 RP
我正在将 opencv 与 C 一起使用,我正在尝试获取 2 个摄像头之间的外部参数(旋转和平移)。 有人告诉我可以使用棋盘格图案进行校准,但我找不到任何好的样本。我该怎么做? 编辑 给出的建议是用棋
我正在尝试在 android 图库小部件中缩放/平移图像。图像覆盖整个屏幕。虽然我可以缩放/平移图库中的图像,但我无法滑动到下一张/上一张图像。单个图像的缩放和平移效果很好。 我从 Hello And
当允许平移时,所有鼠标事件上的 JavaFX ScrollPane Pane : scrollPane.setPannable(true); 如何限制 ScrollPane 仅在鼠标中间事件上平移,
我一直试图弄清楚如何在 paperjs 中使用 onMouseDrag 和 onMouseDown 进行平移/缩放。 我看到的唯一引用是在 coffescript 中,并且不使用 paperjs 工具
我正在使用 d3 来渲染简化的甘特图,并使用 d3.behavior.zoom 进行平移和缩放。 x 比例是一个时间比例(稍微修改为以列为中心的日历天等)并且工作得很好,但是我在决定如何缩放/平移 y
我已经使用关键帧为HTML/CSS3创建了动画。 动画是一个图标,该图标应该围绕其中心点旋转和缩放。 该动画可在Chrome中运行,但在Safari中,直到动画结束,它才能正确转换。 这是-定位到 s
我有一个在登录事件后调用的 TranslationService,在这个服务中我想初始化 $translateProvider.translation 但这个对象似乎无法在 app.config(..
滚动和平移有什么区别? 平移是否被识别为拖动图像/背景的 Action ,而滚动仅在您使用滚动条时? 而且,拖动和平移有什么区别? 当我拖动google maps的 map 时,哪个术语合适,拖动还是
当用户按下鼠标并移动它时,我试图平移 Canvas ,但由于某种我看不到的原因,它似乎不起作用。有什么想法吗? canvas.addEventListener('mousedown', onM
我正在拼命寻找一种用 Pyglet 控制声音(左右)平衡的方法。 我知道 3D 定位系统,但我真正想要的只是控制平移(类似于 -1:left 1:right),而 3D 系统在这种情况下会适得其反(
考虑以下两组点。我想找到最佳的 2D 平移和旋转,以对齐数据集蓝色和数据集橙色之间的最大数量的点,如果到另一个数据集中最近邻居的距离小于阈值,则认为该点对齐。 我知道这与“迭代最近点”算法有关,但在这
我正在尝试包含 @bumbeishvili 的 Convex Hull 实现( https://bl.ocks.org/bumbeishvili/f027f1b6664d048e894d19e54fe
我正在尝试在平移和缩放时使可缩放/拖动矩形不超出 svg 边界。我尝试基于此 example 来实现它,但我似乎无法让它工作。我创建了 this jsfiddle只有可缩放和可拖动的矩形。再一次,我试
UIScrollView 有一个内置的行为“directionLockEnabled”。 启用后,平移将尝试锁定到水平或垂直方向。但是当用户积极尝试对角滚动时 - 它仍然允许对角滚动。 我想删除对角滚
我正在编写一个 GUI,它将执行一些图形平移/旋转等操作。 我的问题是,当我尝试翻译我的图形时, (a) 整个屏幕都会平移,而不是我的一小块绘制区域 (b) 旧油漆留在那里,留下一个大油漆 Blob
我最近一直在做一个项目,作为我的作业。 好吧,言归正传,我有一个 Scene2D 的 Screen 实现,我遇到的问题是我在小部件上的触摸事件不会在小部件上停止。 我的意思是,如果我弹出一个窗口,并尝
我是一名优秀的程序员,十分优秀!