Flutter自定义组件插件zwidget的使用

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

Flutter自定义组件插件zwidget的使用

ZWidget 是一个Flutter插件，通过堆叠并适当变换小部件来创建3D视觉效果。它受到 ztext.js 的启发。

功能特性

  • 倾斜和模拟3D：轻松地为你的UI元素添加3D效果。
  • 多方向构造函数：ZWidget.backwards()、ZWidget.forwards() 和 ZWidget.bothDirections() 用于指定透视方向。
  • 定制化构建：ZWidget.builder() 允许你控制每一层显示的小部件，例如创建渐变效果。
  • 性能考虑：考虑到性能问题，建议限制每层小部件的复杂度。

使用方法

ZWidget 构造函数

ZWidget.backwards(), ZWidget.forwards() 和 ZWidget.bothDirections()

这些构造函数根据你想要的透视方向提供相应的参数设置。下面是一个完整的ZWidget.bothDirections() 示例：

ZWidget.bothDirections(
  // 中间层
  midChild: Container(
    width: 60,
    height: 60,
    color: Colors.blue,
  ),
  midToBotChild: Container(
    width: 60,
    height: 60,
    color: Colors.blueGrey,
  ),
  // 中间层到顶层之间的层
  midToTopChild: Container(
    width: 60,
    height: 60,
    color: Colors.lightBlue,
  ),
  // 栈底的层
  botChild: Container(
    width: 60,
    height: 60,
    color: Colors.grey,
  ),
  // 栈顶的层
  topChild: Container(
    width: 60,
    height: 60,
    color: Colors.lightBlueAccent,
  ),
  // 绕X轴旋转
  rotationX: pi / 3,
  // 绕Y轴旋转
  rotationY: -pi / 4,
  // 层的数量。始终为奇数（如果是偶数则会增加）
  layers: 5,
  // 层间距
  depth: 32,
)

ZWidget.builder()

如果你想控制每一层显示的小部件，可以使用ZWidget.builder()。这里有一个例子，展示了如何创建一个带有不同颜色图标的3D效果：

ZWidget.builder(
  builder: (index) {
    return Icon(
      Icons.star,
      size: 60,
      color: Color.lerp(Colors.brown, Colors.grey, index / 7),
    );
  },
  rotationX: -pi / 7,
  rotationY: -pi / 9,
  layers: 11,
  depth: 25,
  direction: ZDirection.both,
)

参数说明

以下是ZWidget的主要参数：

  • builder: 用于构建每一层的小部件的函数。
  • depth: 层间距。
  • direction: 透视方向（forward、backward 或 both）。
  • rotationX: 绕X轴的旋转角度。
  • rotationY: 绕Y轴的旋转角度。
  • layers: 层数。始终为奇数（如果是偶数则会增加）。
  • reverse: 实验性参数，用于反转X和Y轴的旋转。
  • debug: 显示粉色边框以表示ZWidget的布局大小。
  • perspective: 控制视角的大小。
  • alignment: 变换原点。
  • fade: 实验性的淡入淡出效果。

性能注意事项

如果ZWidget有11层，则意味着将绘制11个小部件。尽量减少每个小部件的复杂度以优化性能。例如，对于不透明的图片，可以使用简单的容器来模拟3D效果。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用ZWidget插件：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:zwidget/zwidget.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ZWidget Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const ZWidgetShowcase(),
    );
  }
}

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

  @override
  State<ZWidgetShowcase> createState() => _ZWidgetShowcaseState();
}

class _ZWidgetShowcaseState extends State<ZWidgetShowcase> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ZWidget Example'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _backwardOnly(),
            _forwardOnly(),
            _bothDirections(),
            _builder(),
            _otherWidgets(),
          ],
        ),
      ),
    );
  }

  Widget _backwardOnly() {
    return Column(children: [
      _title("ZWidget.backwards()"),
      Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
        ZWidget.backwards(
          midChild: Container(
            width: 60,
            height: 60,
            color: Colors.blue,
          ),
          midToBotChild: Container(
            width: 60,
            height: 60,
            color: Colors.black,
          ),
          rotationX: pi / 3,
          rotationY: -pi / 4,
          layers: 5,
          depth: 8,
        ),
        // 更多实例...
      ]),
    ]);
  }

  Widget _forwardOnly() {
    return Column(children: [
      _title("ZWidget.forwards()"),
      Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
        ZWidget.forwards(
          midChild: Container(
            width: 60,
            height: 60,
            color: Colors.blue,
          ),
          midToTopChild: Container(
            width: 60,
            height: 60,
            color: Colors.black.withOpacity(0.4),
          ),
          topChild: Container(
            width: 60,
            height: 60,
            color: Colors.blue,
          ),
          rotationX: pi / 3,
          rotationY: -pi / 4,
          layers: 5,
          depth: 16,
        ),
        // 更多实例...
      ]),
    ]);
  }

  Widget _bothDirections() {
    return Column(children: [
      _title("ZWidget.bothDirections()"),
      Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
        ZWidget.bothDirections(
          midChild: Container(
            width: 60,
            height: 60,
            color: Colors.blue,
          ),
          midToBotChild: Container(
            width: 60,
            height: 60,
            color: Colors.blueGrey,
          ),
          midToTopChild: Container(
            width: 60,
            height: 60,
            color: Colors.lightBlue,
          ),
          botChild: Container(
            width: 60,
            height: 60,
            color: Colors.grey,
          ),
          topChild: Container(
            width: 60,
            height: 60,
            color: Colors.lightBlueAccent,
          ),
          rotationX: pi / 3,
          rotationY: -pi / 4,
          layers: 5,
          depth: 32,
        ),
        // 更多实例...
      ]),
    ]);
  }

  Widget _builder() {
    final rainbow = [
      Colors.orange,
      Colors.brown,
      Colors.red,
      Colors.lime,
      Colors.blue,
      Colors.black,
      Colors.green,
      Colors.pink,
      Colors.deepPurpleAccent,
      Colors.cyanAccent,
      Colors.teal,
    ];
    return Column(children: [
      _title("ZWidget.builder()"),
      Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
        ZWidget.builder(
          builder: (index) {
            return Container(
              width: 60,
              height: 60,
              color: Colors.blue.withOpacity(0.6),
              child: Center(
                child: Text("$index",
                    style: Theme.of(context).textTheme.headline3),
              ),
            );
          },
          rotationX: pi / 4,
          rotationY: -pi / 4,
          layers: 3,
          depth: 75,
          direction: ZDirection.both,
        ),
        // 更多实例...
      ]),
    ]);
  }

  Widget _otherWidgets() {
    return Column(children: [
      _title("Other widgets"),
      Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
        ZWidget.backwards(
          midChild: const Text(
            'ZWidget',
            style: TextStyle(
                color: Colors.blue, fontSize: 20, fontWeight: FontWeight.bold),
          ),
          midToBotChild: const Text(
            'ZWidget',
            style: TextStyle(
                color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
          ),
          rotationX: pi / 4,
          rotationY: pi / 4,
          layers: 5,
          depth: 8,
        ),
        // 更多实例...
      ]),
    ]);
  }

  Widget _title(String title) {
    return Padding(
      child: Text(
        title,
        style: Theme.of(context).textTheme.bodyText1,
      ),
      padding: const EdgeInsets.only(top: 30, bottom: 20),
    );
  }
}

这个示例代码展示了如何在Flutter应用中使用ZWidget插件创建各种3D效果。你可以根据需要调整参数，以实现不同的视觉效果。


更多关于Flutter自定义组件插件zwidget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义组件插件zwidget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中自定义组件并使用zwidget（假设zwidget是一个示例自定义组件库）的示例代码案例。为了演示，我们将创建一个简单的自定义组件，并在Flutter应用中展示其使用。

1. 创建自定义组件库（假设为zwidget）

首先，我们假设zwidget是一个包含自定义组件的Flutter包。这里我们仅创建一个简单的自定义按钮组件。

zwidget/lib/custom_button.dart

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  CustomButton({required this.label, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.blue),
        foregroundColor: MaterialStateProperty.all(Colors.white),
        shape: MaterialStateProperty.all(RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
        )),
      ),
      child: Text(label),
    );
  }
}

zwidget/pubspec.yaml

确保你的pubspec.yaml文件正确配置了包的描述和依赖：

name: zwidget
description: A new Flutter package.
version: 0.0.1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

2. 在主项目中使用自定义组件库

现在，我们假设你已经有一个Flutter应用，我们将把zwidget包添加到这个应用中并使用CustomButton组件。

主项目pubspec.yaml

在你的主项目的pubspec.yaml文件中添加对zwidget包的依赖（假设zwidget位于本地路径）：

dependencies:
  flutter:
    sdk: flutter
  zwidget:
    path: ../path/to/zwidget  # 修改为你的zwidget包的路径

主项目lib/main.dart

在主项目的main.dart文件中导入并使用CustomButton组件：

import 'package:flutter/material.dart';
import 'package:zwidget/custom_button.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: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  void _handleButtonPress() {
    print("Button pressed!");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: CustomButton(
          label: 'Press Me',
          onPressed: _handleButtonPress,
        ),
      ),
    );
  }
}

3. 运行应用

确保你已经运行了flutter pub get来获取依赖，然后你可以运行你的Flutter应用来查看自定义按钮组件的效果。

flutter run

总结

这个示例展示了如何创建一个简单的自定义组件库zwidget，并在主Flutter项目中导入和使用这个库中的组件。通过这种方式，你可以创建并复用复杂的自定义组件，提高开发效率。

回到顶部