Flutter屏幕旋转控制插件toggle_rotate的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter屏幕旋转控制插件toggle_rotate的使用

描述

目标: 让一个组件点击时执行旋转,再点击旋转回去。

最简使用

最简使用 时长、曲线、方向 一切组件 旋转角度
最简使用 时长、曲线、方向 一切组件 旋转角度

所有属性

名称 类型 功能 备注 默认
beginAngle double 起始角度 角度制 0
endAngle double 终止角度 角度制 90
durationMs int 动画时长 毫秒 200
curve Curve 动画曲线 - Curves.fastOutSlowIn
clockwise bool 是否顺时针旋转 - true
onTap void Function 点击事件 - null
onEnd void Function(bool) 动画结束回调 - null
child Widget 子组件 @required null

最简使用

ToggleRotate(
  child: Icon(Icons.arrow_upward, size: 60, color: Colors.orangeAccent),
  onEnd: (bool isExpanded) { // 动画结束时间
    print("---expanded---:$isExpanded-------");
  },
  onTap: () {}, // 点击事件
),

指定时长和曲线和方向

ToggleRotate(
  curve: Curves.decelerate,
  durationMs: 400, // 动画时长
  clockwise: false, // 是否是顺时针
  child: Icon(Icons.arrow_upward, size: 60, color: Colors.orangeAccent),
  onTap: () {},
),

可使一切组件进行旋转切换

ToggleRotate(
  curve: Curves.decelerate,
  durationMs: 400,
  child: Image(width: 60, height: 60, image: AssetImage("assets/images/icon_28.jpg")),
  onTap: () {},
)

可使旋转的角度

ToggleRotate(
  beginAngle: 0, // 起始角度
  endAngle: 45, // 终止角度
  curve: Curves.linear,
  child: Image(width: 60, height: 60, image: AssetImage("assets/images/icon_28.jpg")),
  onTap: () {},
)

示例代码

example/main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:toggle_rotate/toggle_rotate.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: Center(child: HomePage()),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Wrap(
        spacing: 20,
        children: <Widget>[
          ToggleRotate(
            beginAngle: 0, // 起始角度
            endAngle: 45, // 终止角度
            curve: Curves.linear, // 动画曲线
            durationMs: 400, // 动画时长
            clockwise: true, // 顺时针旋转
            child: FlutterLogo(size: 60,),
            onEnd: (bool isExpanded) {
              print("---expanded---:$isExpanded-------");
            },
            onTap: () {
              print("---按下----------");
            },
          ),
        ],
      ),
    );
  }
}

以上就是 toggle_rotate 插件的基本使用方法和示例代码。希望对你有所帮助!


更多关于Flutter屏幕旋转控制插件toggle_rotate的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕旋转控制插件toggle_rotate的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用toggle_rotate插件来控制屏幕旋转的示例代码。这个插件允许你在应用中动态地切换屏幕旋转锁定状态。

首先,你需要在你的pubspec.yaml文件中添加toggle_rotate依赖:

dependencies:
  flutter:
    sdk: flutter
  toggle_rotate: ^latest_version  # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

接下来,你可以在你的Flutter应用中使用ToggleRotate插件。下面是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:toggle_rotate/toggle_rotate.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Screen Rotation Control',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isScreenRotationLocked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen Rotation Control'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Screen Rotation is ${isScreenRotationLocked ? "Locked" : "Unlocked"}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                bool result = await ToggleRotate.toggleOrientation();
                setState(() {
                  isScreenRotationLocked = !result;
                });
              },
              child: Text('Toggle Screen Rotation'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个按钮和一个文本标签。文本标签显示当前屏幕旋转锁定状态,按钮用于切换屏幕旋转锁定状态。

关键部分解析:

  1. 依赖导入

    import 'package:toggle_rotate/toggle_rotate.dart';
    
  2. 按钮点击事件

    ElevatedButton(
      onPressed: () async {
        bool result = await ToggleRotate.toggleOrientation();
        setState(() {
          isScreenRotationLocked = !result;
        });
      },
      child: Text('Toggle Screen Rotation'),
    ),
    

    在按钮点击事件中,我们调用ToggleRotate.toggleOrientation()方法来切换屏幕旋转状态。该方法返回一个布尔值,表示切换后的状态(true表示锁定,false表示未锁定)。然后,我们使用setState方法更新UI以反映当前状态。

  3. 状态显示

    Text(
      'Screen Rotation is ${isScreenRotationLocked ? "Locked" : "Unlocked"}',
      style: TextStyle(fontSize: 24),
    ),
    

    这个文本标签显示当前屏幕旋转状态。

注意事项:

  • 确保在AndroidManifest.xml和Info.plist文件中配置了必要的屏幕旋转权限,否则插件可能无法正常工作。
  • 在iOS上,屏幕旋转锁定可能需要额外的配置,特别是在iOS 16及以后的版本中,苹果对屏幕旋转控制有了更多的限制。

这个示例提供了一个基本的使用toggle_rotate插件的方法,你可以根据实际需求进一步扩展和定制。

回到顶部