在Flutter中顯示一半的旋轉影像

我正在創建一個圓圈正在旋轉的影片（左圖）。

我的目標是只有一半的影片可見（右圖中的藍色矩形）。在 Web 開發中，我會創建一個帶有隱藏溢位的 div。我無法讓它在 Flutter 中作業。我沒有運氣調查過

這是我用來旋轉影像的 Flutter 代碼：

class ImageRotate extends StatefulWidget {
  const ImageRotate({Key? key}) : super(key: key);

  @override
  _ImageRotateState createState() => _ImageRotateState();
}

class _ImageRotateState extends State<ImageRotate>
    with SingleTickerProviderStateMixin {
  late AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 30),
    );

    animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      // color: Colors.white,
      child: AnimatedBuilder(
        animation: animationController,
        child: SizedBox(
          child: Image.asset('assets/svg/circle.png'),
        ),
        builder: (BuildContext context, Widget? _widget) {
          return Transform.rotate(
            angle: animationController.value * 6.3,
            child: _widget,
          );
        },
      ),
    );
  }
}

uj5u.com熱心網友回復：

您可以嘗試使用Stack使用其clipBehavior: Clip.hardEdge選項來剪輯其內容，然后將其移動到其高度的一半。您將Stack包裝在SizedBox中以將其高度限制為圓高度的一半，并將高度也應用于 ImageRotate，如下所示：

Center(
  child: SizedBox(
    height: 200,
    width: 400,
    child: Stack(
       clipBehavior: Clip.hardEdge,
       children: [
         Positioned(
            top: 0,
            child: ImageRotate()
         )
       ]
    )
 ),
)

到您的ImageRotate：

SizedBox(
   child: Image.asset('assets/svg/circle.png', width: 400, height: 400, fit: BoxFit.contain)
),

查看這個

uj5u.com熱心網友回復：

這里有一個想法，

1. 按此順序將您的圓圈和矩形不透明框（可能是容器）放入堆疊小部件中。

2. 給容器一半的矩形框大小和顏色可以隱藏圓圈。

3. 將容器包裹在 Positioned Widget 中，并將其與藍色矩形的下半部分對齊。

   @override
   Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          height: 400,
          width: 400,
          alignment: Alignment.center,
          child: Stack(children: [
            AnimatedBuilder(
              animation: animationController,
              child: ClipOval(
                child: Image.asset(
                  'assets/images/download.png',
                  width: 400,
                  height: 400,
                  fit: BoxFit.cover,
                ),
              ),
              builder: (BuildContext context, Widget? _widget) {
                return Transform.rotate(
                  angle: animationController.value * 6.3,
                  child: _widget,
                );
              },
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: Container(
                width: 400,
                height: 200,
                color: Colors.white,
              ),
            )
          ]),
        ),
      ),
    );
   }
   

在這段代碼中：

1. 我將 ClipOval 用于圓形影像，因為我的影像是方形的。
2. 父容器具有高度和寬度，以及子定位容器（父高度的一半）。
3. 以及用于避免設備邊距的 SafeArea。

這是你要找的嗎？

標籤：扑 颤动动画

上一篇：在正文下方添加按鈕

下一篇：我如何在firebase顫振中上傳和下載pdf