我想创建一个可调整大小的容器,可以由用户使用水平拖动调整大小。
这个Gif可以解释这个需求:
我尝试了GestureDetector.水平拖动,但结果是:
Container(
color: primary,
width: size.width,
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onHorizontalDragUpdate: (details) {
final double newWidth;
if (details.delta.dx > 0) {
// movement in positive direction
final newWidth = size.width + 1;
print(newWidth);
final updatedSize = Size(newWidth, size.height);
setState(() {
size = updatedSize;
});
} else {
// movement in negative direction
final newWidth = math.max(size.width - 1, 5).toDouble();
print(newWidth);
final updatedSize = Size(newWidth, size.height);
setState(() {
size = updatedSize;
});
}
},
child: const Icon(
Icons.navigate_before_rounded,
color: Colors.white,
),
),
GestureDetector(
onHorizontalDragUpdate: (det) {
if (det.delta.dx > 1) {
var newWidth = size.width + 1;
final updatedSize = Size(newWidth, size.height);
setState(() {
size = updatedSize;
});
} else {
var newWidth = size.width - 1;
newWidth = math.max(newWidth, 10);
final updatedSize = Size(newWidth, size.height);
setState(() {
size = updatedSize;
});
}
},
child: const Icon(
Icons.navigate_next_rounded,
color: Colors.white,
),
),
],
),
),
我正在寻找一种方法来获得使用拖动一侧的大小变化,也应该减少或增加的宽度拖动方向的基础上,如果可能的话,整个容器可以移动以及。
2条答案
按热度按时间iyr7buue1#
您可以使用
Stack
和Positioned
小部件来处理容器大小调整,并拖动整个容器(我正在使用transform
)。Run on dartPad
你可以玩这个小工具。
您可以使用if条件进行 Package ,以避免超出屏幕。
fruv7luv2#
这里是@Yeasin Sheikh的答案的更新版本,它解决了一些错误,避免了走出窗外和跨越自己。