在碼農的世界裡，優美的應用體驗，來源於程式設計師對細節的處理以及自我要求的境界，年輕人也是忙忙碌碌的碼農中一員，每天、每週，都會留下一些腳印，就是這些創作的內容，有一種執著，就是不知為什麼，如果你迷茫，不妨來瞅瞅碼農的軌跡。
1 InteractiveViewer 是什麼 ？
InteractiveViewer 是Flutter 中一個可以將子Widget進行平移與縮放操作的 Widget，使用者可以通過拖動進行平移或者雙指捏放來放大來子元素。
2 基本使用
如對一個圖片的雙指捍合放大
void main() => runApp(MaterialApp(
home: TestPage(),
));
class TestPage extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
///填充佈局
body: Center(
child: InteractiveViewer(
alignPanAxis: false,
//對子Widget 進行縮放平移
child: Image.asset("assets/images/banner1.webp"),
),
),
);
}
}
複製程式碼3 InteractiveViewer 屬性詳細說明
InteractiveViewer({
Key? key,
this.alignPanAxis = false,
this.boundaryMargin = EdgeInsets.zero,
this.constrained = true,
// These default scale values were eyeballed as reasonable limits for common
// use cases.
this.maxScale = 2.5,
this.minScale = 0.8,
this.onInteractionEnd,
this.onInteractionStart,
this.onInteractionUpdate,
this.panEnabled = true,
this.scaleEnabled = true,
this.transformationController,
required this.child,
})
複製程式碼maxScale屬性用來設定最大縮放比例，minScale用來設定最小縮放比例。
3.1 alignPanAxis
預設為 false ，子Widget可以沿任意方向平移，如果設定為true,對角線平移是不允許的，也就是說只能沿一個方向平移，如果開始平移為水平方向則在本次手指抬起前只能是水平移動，豎直方向的移動同理。
3.2 boundaryMargin
平移邊緣距離，預設為EdgeInsets.zero，四個邊緣為0，如下圖平移無邊緣出現
當配置為 EdgeInsets.all(20) 時，效果如下圖所示：
3.3 constrained 屬性
用來設定 是否約束子 Widget ,預設為true，也就是 InteractiveViewer 的大小會強加給子Widget的大小約束，如果設定為 false ，則可理解為是 InteractiveViewer 包裹子Widget.
3.4 InteractiveViewer 手勢監聽與回撥
InteractiveViewer(
//對子Widget 進行縮放平移
child: Image.asset("assets/images/banner1.webp"),
//結束平移與縮放的回撥
onInteractionEnd: (ScaleEndDetails details) {},
//開始平移與縮放的回撥
onInteractionStart: (ScaleStartDetails details) {},
//平移或者是縮放過程中的回撥
onInteractionUpdate: (ScaleUpdateDetails details) {},
)
複製程式碼完畢