Flutter前端 Web 框架Pheasant的使用

发布于 1周前 作者 yuanlaile 最后一次编辑是 5天前 来自 Flutter

Flutter前端 Web 框架Pheasant的使用

Pheasant

Pub Version Pub Publisher

Pheasant 是一种现代的、进步的、快速重新加载的强大前端 Web 框架，用 Dart 语言编写并操作。它支持 JavaScript，并提供了现代 Web 开发的所有功能（如 Web 组件、HTML 渲染等），结合了 Dart 的动态功能。

<script>
int myNum = 9;

void addNum() {
    myNum++;
}
</script>

<template>
<div id="output">
    <p>Hello World, Welcome to Pheasant</p>
    <p>{{myNum}}</p>
</div>
</template>

<style syntax="scss">
$primary-color: red;

#output {
    font-family: verdana;
    color: blue;
    background-color: powderblue;
}

p {
    color: $primary-color;
}
</style>

新手入门

如果你是新手，请参阅此指南以快速开始，并迈向制作你最棒的应用。

它如何工作？

Pheasant 通过渲染 .phs 文件中的组件来工作。这些文件包含三个部分：

  1. 模板 包含类似 HTML 的语法，后跟特殊的 Pheasant 组件，帮助轻松且动态地在你的 Web 应用程序中渲染代码。
<template>
<div id="output">
    <p>Hello World, Welcome to Pheasant</p>
    <p>{{myNum}}</p>
</div>
</template>
  1. 脚本 包含位于其中的 Dart 数据，可以在 模板 部分中用于渲染。
<script>
int myNum = 9;

void addNum() {
    myNum++;
}
</script>
  1. 样式 包含模板组件的全局或局部样式。
<style syntax="scss">
$primary-color: red;

#output {
    font-family: verdana;
    color: blue;
    background-color: powderblue;
}

p {
    color: $primary-color;
}
</style>

如何使用该插件

这个包非常精简，并依赖于其子包的功能 - pheasant_temp；模板引擎，pheasant_assets；样式和资源引擎，pheasant_build；构建系统，以及 pheasant_meta；元数据包。该包本身只提供了一个 API 来使用这些包的功能。

在每个主入口页面中使用的主库是 pheasant 库，它作为 API 库公开 createApp 函数，用于创建和渲染 Pheasant 应用程序。

import 'package:pheasant/pheasant.dart';

import 'package:<your-lib>/main.phs.dart';

void main() {
    createApp(App);
}

更多关于Flutter前端 Web 框架Pheasant的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter前端 Web 框架Pheasant的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


由于pheasant这个Flutter插件的具体功能和用途是未知的，并且您提出了一个基于其名称的合理推测——可能与鸟类相关的动画或UI组件有关，我将基于这个假设给出一个Flutter插件使用案例的示例代码。请注意，这只是一个假设性的示例，并不代表pheasant插件的真实功能。

假设pheasant插件提供了一个鸟类动画的UI组件，我们可以编写一个Flutter应用来展示这个组件。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:pheasant/pheasant.dart'; // 假设这是插件的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pheasant Bird Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 假设PheasantBirdAnimation是插件提供的动画组件
    // 并且它接受一个AnimationController来控制动画
    return Scaffold(
      appBar: AppBar(
        title: Text('Pheasant Bird Animation Demo'),
      ),
      body: Center(
        child: PheasantBirdAnimation(
          animation: _controller,
          // 其他可能的参数，例如鸟的种类、颜色等（这里仅为假设）
          birdType: BirdType.pheasant, // 假设的枚举类型
          color: Colors.red, // 假设可以设置颜色
        ),
      ),
    );
  }
}

// 假设的枚举类型，用于指定鸟的种类（这里仅为示例）
enum BirdType {
  pheasant,
  // 其他可能的鸟类
}

// 假设的PheasantBirdAnimation组件（这里仅为示例，实际插件可能提供不同的API）
class PheasantBirdAnimation extends AnimatedWidget {
  final BirdType birdType;
  final Color color;

  const PheasantBirdAnimation({
    Key? key,
    required Animation<double> animation,
    required this.birdType,
    required this.color,
  }) : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable as Animation<double>;

    // 假设的绘制逻辑，这里使用一个简单的Container和旋转动画作为示例
    return Transform.rotate(
      angle: animation.value * 2.0 * 3.141592653589793, // 旋转一圈
      child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: color,
        ),
        child: Center(
          child: Text(
            birdType == BirdType.pheasant ? 'Pheasant' : '',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

请注意，上述代码中的PheasantBirdAnimation组件、BirdType枚举以及pheasant插件的导入路径都是基于假设的，并不代表真实存在的插件API。如果pheasant插件确实存在并且提供了类似的功能，您应该查阅其官方文档以获取正确的使用方法和API。

另外，如果pheasant插件并没有提供这样的功能，或者您想要实现一个自定义的鸟类动画组件，您可以参考上述代码中的动画和绘制逻辑，使用Flutter的动画系统和绘图API来创建自己的组件。

回到顶部