將影像部分放在螢屏外并旋轉它

我目前正在玩 Flutter，遇到了一個需要您幫助的問題。我已經用谷歌搜索了很多，但缺少條款或沒有……

我有一個輪子，可以使用 GestureDetector 圍繞輪子中心（實際上是容器）旋轉。到目前為止這很好，效果很好。但是，我想把輪子放在左邊，這樣一半就在螢屏外。

我所擁有的--------------- --- 我想要達到的

輪子仍應圍繞其中心旋轉，以便再次顯示被覆寫的顏色。

非常感謝您的幫助！

我目前使用的代碼基本上取自這里：如何使用 GestureDetector 在 Flutter 中平滑地旋轉影像？

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wheel',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: const Wheel(),
    );
  }
}

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

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

class _WheelState extends State<Wheel> {
  double finalAngle = 0.0;
  double oldAngle = 0.0;
  double upsetAngle = 0.0;

  @override
  Widget build(BuildContext context) {
    return _defaultApp(context);
  }

  _defaultApp(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: 340,
                  height: 500,
                  color: Colors.grey,
                  margin: const EdgeInsets.all(10.0),
                  child: LayoutBuilder(
                    builder: (context, constraints) {
                      Offset centerOfGestureDetector = Offset(
                          constraints.maxWidth / 2, constraints.maxHeight / 2);
                      return GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onPanStart: (details) {
                          final touchPositionFromCenter =
                              details.localPosition - centerOfGestureDetector;
                          upsetAngle =
                              oldAngle - touchPositionFromCenter.direction;
                        },
                        onPanEnd: (details) {
                          setState(
                            () {
                              oldAngle = finalAngle;
                            },
                          );
                        },
                        onPanUpdate: (details) {
                          final touchPositionFromCenter =
                              details.localPosition - centerOfGestureDetector;

                          setState(
                            () {
                              finalAngle = touchPositionFromCenter.direction  
                                  upsetAngle;
                            },
                          );
                        },
                        child: Transform.rotate(
                          angle: finalAngle,
                          child: Image.asset('assets/images/wheel.png',
                              scale: 1.0),
                        ),
                      );
                    },
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

我有一個解決方案。雖然它不是最好的解決方案，但它是可行的：如果你喜歡它或使用它，請點贊:)

Widget build(BuildContext context) {
return new Scaffold(
  backgroundColor: Colors.white,
  appBar: new AppBar(
    title: new Text('Hello'),
  ),
  body: ListView(
    scrollDirection: Axis.horizontal,
    reverse: true,
    physics: NeverScrollableScrollPhysics(),
    children: [
      Container(
        width: MediaQuery.of(context).size.width * 2,
        height: 500,
        color: Colors.grey,
        margin: const EdgeInsets.all(10.0),
        child: LayoutBuilder(
          builder: (context, constraints) {
            Offset centerOfGestureDetector =
                Offset(constraints.maxWidth / 2, constraints.maxHeight / 2);
            return GestureDetector(
              behavior: HitTestBehavior.translucent,
              onPanStart: (details) {
                final touchPositionFromCenter =
                    details.localPosition - centerOfGestureDetector;
                upsetAngle = oldAngle - touchPositionFromCenter.direction;
              },
              onPanEnd: (details) {
                setState(
                  () {
                    oldAngle = finalAngle;
                  },
                );
              },
              onPanUpdate: (details) {
                final touchPositionFromCenter =
                    details.localPosition - centerOfGestureDetector;
                setState(
                  () {
                    finalAngle =
                        touchPositionFromCenter.direction   upsetAngle;
                  },
                );
              },
              child: Transform.rotate(
                angle: finalAngle,
                child: Image.network(
                    'https://static.toiimg.com/thumb/msid-31346158,width-748,height-499,resizemode=4,imgsize-114461/.jpg',
                    scale: 1.0),
              ),
            );
          },
        ),
      ),
    ],
  ),
);

}

標籤：

上一篇：當我點擊我的抽屜選單按鈕時，我的抽屜瓷磚的onTapped被執行

下一篇：如何在Flutter中初始化后立即呼叫函式？