flutter 我想反转“图标:扑动中的图标(Icons.xxx)

wfauudbj  于 2023-01-09  发布在  Flutter
关注(0)|答案(5)|浏览(168)

我想在Flutter中反转"icon: Icon(Icons.xxx)"。右上和左下。

//TopLeft
                  Transform.rotate(
                    angle: 180 * pi / 180,
                    child: IconButton(
                        onPressed: () {
                          setState(() {});
                        },
                        icon: Icon(Icons.branding_watermark)),
                  ),
                  //TopRight
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: Icon(Icons.branding_watermark)),
                  //bottomLeft
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: Icon(Icons.branding_watermark)),
                  //bottomRight
                  IconButton(
                      onPressed: () {
                        setState(() {});
                      },
                      icon: Icon(Icons.branding_watermark)),

我确实试过matrix4,但是我不能设置它。

h7appiyu

h7appiyu1#

请改用变换小部件,因为它具有更高级的属性,如矩阵旋转。
右上角:-

Transform(
transform: Matrix4.rotationX(pi), // Invert Y-axis
alignment: Alignment.center,
child: IconButton(
    onPressed: () {
      setState(() {});
    },
    icon: const Icon(Icons.branding_watermark)),
),

输出:-

左下角:-

Transform(
transform: Matrix4.rotationY(pi), // Invert Y-axis
alignment: Alignment.center,
child: IconButton(
    onPressed: () {
      setState(() {});
    },
    icon: const Icon(Icons.branding_watermark)),
),

输出:-

dxpyg8gm

dxpyg8gm2#

你应该问这个问题:

Transform.rotate(
            angle: pi,
            child: IconButton(
                onPressed: () {
                  setState(() {});
                },
                icon: Icon(Icons.branding_watermark)),
          ),
          //TopRight
          Transform.rotate(
            angle: -pi / 2,
            child: IconButton(
                onPressed: () {
                  setState(() {});
                },
                icon: Icon(Icons.branding_watermark)),
          ),
          //bottomLeft
          Transform.rotate(
            angle: pi / 2,
            child: IconButton(
                onPressed: () {
                  setState(() {});
                },
                icon: Icon(Icons.branding_watermark)),
          ),
          //bottomRight
          IconButton(
              onPressed: () {
                setState(() {});
              },
              icon: Icon(Icons.branding_watermark)),

这是我在dartpad上执行的结果:

7cjasjjr

7cjasjjr3#

可以使用缩放而不是旋转:

//TopRight
Transform.scale(
  scaleX: -1,
  scaleY: 1,
  child: IconButton(
      onPressed: () {
        setState(() {});
      },
      icon: Icon(Icons.branding_watermark)),
),

通过使scaleX为负,可以水平翻转它;通过使scaleY为负,可以垂直翻转它。

jjjwad0x

jjjwad0x4#

这可以通过使用两个变换来完成:

Transform(
            transform:Matrix4.rotationX(math.pi),
            alignment: Alignment.center,
            child: Transform(
                          alignment: Alignment.center,
                           transform: Matrix4.rotationY(math.pi),
                           child: Icon(Icons.rotate_left, size: 100,),
                   ),
       ),
blpfk2vs

blpfk2vs5#

剩下的2个按钮:

IconButton(
                onPressed: () {},
                icon: Transform(
                    alignment: Alignment.center,
                    transform: Matrix4.rotationY(pi),
                    child: Icon(Icons.branding_watermark))),
            IconButton(
                onPressed: () {},
                icon: Transform(
                    alignment: Alignment.center,
                    transform: Matrix4.rotationY(math.pi)..rotateZ(pi),
                    child: Icon(Icons.branding_watermark))),

相关问题