老孟的博客地址：http://laomengit.com/Flutter 中3D效果是通過Transform組件實現的，沒有變換效果的實現：?class?TransformDemo?extends?StatelessWidget?{@overrideWidget?build(BuildContext?context)?{return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('3D?變換Demo'),
??????),
??????body:?Container(
????????alignment:?Alignment.center,
????????color:?Colors.white,
????????child:?Text('3D?變換Demo'),
??????),
????);
??}
}通過 GestureDetector 組件添加滑動事件監聽：@overrideWidget?build(BuildContext?context)?{return?Scaffold(
????appBar:?AppBar(
??????title:?Text('3D?變換Demo'),
????),
????body:?GestureDetector(
??????onPanUpdate:?(details)?{
????????print('$details');
??????},
??????child:?Container(
????????alignment:?Alignment.center,
????????color:?Colors.white,
????????child:?Text('3D?變換Demo'),
??????),
????),
??);
}添加?Transform對組件進入旋轉：@overrideWidget?build(BuildContext?context)?{return?Transform(
??????transform:?Matrix4.identity()
????????..setEntry(3,?2,?0.001)
????????..rotateX(pi/6)
????????..rotateY(pi/6),
??????alignment:?Alignment.center,
??????child:?Scaffold(
????????appBar:?AppBar(
??????????title:?Text('3D?變換Demo'),
????????),
????????body:?GestureDetector(
??????????onPanUpdate:?(details)?{
??????????},
??????????child:?Container(
????????????alignment:?Alignment.center,
????????????color:?Colors.white,
????????????child:?Text('3D?變換Demo'),
??????????),
????????),
??????));
}將滑動的偏移和旋轉進行關聯：class?TransformDemo?extends?StatefulWidget?{@override_TransformDemoState?createState()?=>?_TransformDemoState();
}class?_TransformDemoState?extends?State<TransformDemo>?{double?_rotateX?=?.0;double?_rotateY?=?.0;@overrideWidget?build(BuildContext?context)?{return?Transform(
????????transform:?Matrix4.identity()
??????????..rotateX(_rotateX)
??????????..rotateY(_rotateY),
????????alignment:?Alignment.center,
????????child:?Scaffold(
??????????appBar:?AppBar(
????????????title:?Text('3D?變換Demo'),
??????????),
??????????body:?GestureDetector(
????????????onPanUpdate:?(details)?{
??????????????setState(()?{
????????????????_rotateX?+=?details.delta.dy?*?.01;
????????????????_rotateY?+=?details.delta.dx?*?-.01;
??????????????});
????????????},
????????????child:?Container(
??????????????alignment:?Alignment.center,
??????????????color:?Colors.white,
??????????????child:?Text('3D?變換Demo'),
????????????),
??????????),
????????));
??}
}基本已經實現了3D效果，但效果比較生硬，尤其垂直方向旋轉的時候遠點和近點在屏幕上的寬度是一樣，添加近大遠小的效果：Transform(
????transform:?Matrix4.identity()
??????..setEntry(3,?2,?0.001)
??????..rotateX(_rotateX)
??????..rotateY(_rotateY),
??...翻書效果上面的效果類似于翻書的效果。實現的原理：將圖片左右切割為兩部分，兩張圖片共分割為4個新的組件，如下圖，分別為1、2、3、4代碼實現：_child1?=?ClipRect(
??child:?Align(
????alignment:?Alignment.centerLeft,
????widthFactor:?0.5,
????child:?child1,
??),
);
_child2?=?ClipRect(
??child:?Align(
????alignment:?Alignment.centerRight,
????widthFactor:?0.5,
????child:?child1,
??),
);
_child3?=?ClipRect(
??child:?Align(
????alignment:?Alignment.centerLeft,
????widthFactor:?0.5,
????child:?child2,
??),
);
_child4?=?ClipRect(
??child:?Align(
????alignment:?Alignment.centerRight,
????widthFactor:?0.5,
????child:?child2,
??),
);將第一張圖片放在第二種圖片的上面，先旋轉?組件2 從 0度到 90度，然后再旋轉?組件3 從 -90度到0度，代碼實現：Row(
??mainAxisAlignment:?MainAxisAlignment.center,
??children:?[
????Stack(
??????children:?[
????????_child1,
????????Transform(
??????????alignment:?Alignment.centerRight,
??????????transform:?Matrix4.identity()
????????????..setEntry(3,?2,?0.001)
????????????..rotateY(_animation1.value),
??????????child:?_child3,
????????),
??????],
????),
????Container(
??????width:?3,
??????color:?Colors.white,
????),
????Stack(
??????children:?[
????????_child4,
????????Transform(
??????????alignment:?Alignment.centerLeft,
??????????transform:?Matrix4.identity()
????????????..setEntry(3,?2,?0.001)
????????????..rotateY(_animation.value),
??????????child:?_child2,
????????)
??????],
????)
??],
)動畫控制器設置：@overridevoid?initState()?{
??init();
??_controller?=
??????AnimationController(vsync:?this,?duration:?Duration(seconds:?5))
????????..addListener(()?{
??????????setState(()?{});
????????});
??_animation?=?Tween(begin:?.0,?end:?pi?/?2)
??????.animate(CurvedAnimation(parent:?_controller,?curve:?Interval(.0,?.5)));
??_animation1?=?Tween(begin:?-pi?/?2,?end:?0.0).animate(
??????CurvedAnimation(parent:?_controller,?curve:?Interval(.5,?1.0)));
??_controller.forward();super.initState();
}其中 child1, child2為兩種圖片，代碼如下：_FlipUpDemoState(
????Container(
??????width:?300,
??????height:?400,
??????child:?Image.asset('assets/images/b.jpg',
????????fit:?BoxFit.cover,
??????),
????),
????Container(
??????width:?300,
??????height:?400,
??????child:?Image.asset('assets/images/c.jpeg',
????????fit:?BoxFit.cover,
??????),
????))最后生成的效果就是開始的翻書效果。上面是左右翻頁效果，同理換成上下翻頁效果：@override
Widget?build(BuildContext?context)?{return?Scaffold(
????appBar:?AppBar(),
????body:?Column(
??????mainAxisAlignment:?MainAxisAlignment.center,
??????children:?[
????????Stack(
??????????children:?[
????????????_upperChild1,
????????????Transform(
??????????????alignment:?Alignment.bottomCenter,
??????????????transform:?Matrix4.identity()
????????????????..setEntry(3,?2,?0.003)
????????????????..rotateX(_animation1.value),
??????????????child:?_upperChild2,
????????????),
??????????],
????????),
????????SizedBox(
??????????height:?2,
????????),
????????Stack(
??????????children:?[
????????????_lowerChild2,
????????????Transform(
??????????????alignment:?Alignment.topCenter,
??????????????transform:?Matrix4.identity()
????????????????..setEntry(3,?2,?0.003)
????????????????..rotateX(_animation.value),
??????????????child:?_lowerChild1,
????????????)
??????????],
????????)
??????],
????),
??);
}

關注我獲取更多知識或者投稿

總結

以上是生活随笔為你收集整理的滑动翻页效果_Flutter实现3D效果，一个字，炫！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。