layout - 如何在相机视图上定位项目
问题描述
我想在我的相机视图上添加一个 Flutter XLider。滑块应控制缩放功能。
我想实现:
FlutterSlider(
values: [300],
max: 500,
min: 0,
axis: Axis.vertical,
onDragging: (handlerIndex, lowerValue, upperValue) {
_lowerValue = lowerValue;
_upperValue = upperValue;
setState(() {});
},
)
body: Container(
margin: EdgeInsets.symmetric(
horizontal: _flaslightOn ? 50.0 : 0.0,
vertical: _flaslightOn ? 50.0 : 0.0),
//switch between 30 and zero when click on light
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new ClipRRect(
borderRadius: BorderRadius.circular(_flaslightOn ? 10.0 : 0.0),
child: Column(
children: [
new Transform.scale(
scale: _scale, //TODO change scale when click + or -
child: new AspectRatio(
aspectRatio: cameraController.value.aspectRatio,
child: cameraPreview),
)
],
),
),
],
),
),
...
}
你怎么能把颤振滑块放在右下角,让它在相机上分层?
解决方案
请使用此代码。
body:Stack(
fit: StackFit.expand,
children:<Widget>[ Container(
margin: EdgeInsets.symmetric(
horizontal: _flaslightOn ? 50.0 : 0.0,
vertical: _flaslightOn ? 50.0 : 0.0),
//switch between 30 and zero when click on light
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new ClipRRect(
borderRadius: BorderRadius.circular(_flaslightOn ? 10.0 : 0.0),
child: Column(
children: [
new Transform.scale(
scale: _scale, //TODO change scale when click + or -
child: new AspectRatio(
aspectRatio: cameraController.value.aspectRatio,
child: cameraPreview),
)
],
),
),
],
),
),
Container(
alignment: Alignment.bottomRight,
child: FlutterSlider(
values: [300],
max: 500,
min: 0,
axis: Axis.vertical,
onDragging: (handlerIndex, lowerValue, upperValue) {
_lowerValue = lowerValue;
_upperValue = upperValue;
setState(() {});
},
)
)
])
);
}
谢谢
推荐阅读
- android - 如何将 ArrayList 从适配器传递到活动?
- firebase - 获取“FirebaseError:缺少权限或权限不足。” 用户具有正确权限时的快照错误
- getuikit - 使用多个容器获取 UI Kit Filter
- c# - 压缩过程发生时如何更新进度条?
- python - 为什么即使它是真的,这个陈述也会被评估为假?
- angular - Angular 2 - 检查特定字段是否已更改
- python - Pandas - 用同一列中的其他值替换列中的值
- javascript - javascript:让return语句跨越多行的干净方法
- kubernetes - GKE 上同一个 Pod 的两个服务
- python - Python - 使用正则表达式查找末尾没有 % 的数字