Flutter穿搭推荐插件wearthat的使用

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

Flutter 穿搭推荐插件 WearThat 的使用

Flutter 穿戴插件 WearThat ⌚

Flutter Wear 是一个致力于成为所有 Android 穿戴设备功能的一站式库（我们还没达到目标，但会慢慢实现 🙃）。

此库仍处于非常早期的发展阶段，每个版本都可能引入破坏性变更！

Buy Me A Coffee

计划功能 📋

  • ❌ 添加支持瓷砖生命周期事件（例如 onTileAddEvent()）
  • ❌ 支持瓷砖动画
  • ❌ 支持热重载瓷砖（仅在预览中）
  • ❌ 整合应用主题
  • ❌ 改进 UI 异常
  • ❌ 创建穿戴小部件系统（类似于 package:flutter/material.dart）
  • ✅ 升级瓷砖到新版本（1.2.0）
  • ❌ 添加测试
  • ✅ 自动同步瓷砖
  • ❌ 为穿戴应用和瓷砖添加健康服务支持（瓷砖使用 androidx.wear.protolayout.expression.PlatformHealthSources，应用服务需进一步研究）

安装

使用 Dart：

$ dart pub add wearthat

使用 Flutter：

$ flutter pub add wearthat

手动安装：

dependencies:
  wearthat: ^0.0.1

别忘了在 build.gradle 中将 compileSdkVersion 设置为 34，minSdkVersion 设置为 28！

android {
  compileSdkVersion 34
  ...
  defaultConfig {
    minSdkVersion 28
  }
}

功能 ✨

设备间通信 📞

获取所有可用节点

final nodes = Wearable.getNodes();

向设备发送消息

// 路径类似路由，用于知道消息应发送到哪里
Wearable.send(WearableMessage.string("PATH", data), nodeId: watch.id /* 或手机 */);

向所有设备发送消息（适合只有一个设备连接的情况）

Wearable.send(WearableMessage.string("PATH", data));

监听传入的消息

Wearable.listen("PATH", _onIncomingMessage);

// 别忘了移除监听器！
Wearable.removeListener("PATH", _onIncomingMessage);

穿搭推荐瓷砖 🍫

瓷砖现在可以使用 Flutter 实现了 💙！

以下是一个示例代码：

class OutfitRecommendationTile extends Tile<OutfitRecommendationState> {
  const OutfitRecommendationTile();

  [@override](/user/override)
  Future<OutfitRecommendationState?> createState() {
    // 模拟获取穿搭推荐数据
    return FakeOutfitProvider().getOutfit();
  }

  [@override](/user/override)
  TileWidget build(TileContext context, OutfitRecommendationState? state) {
    if (state == null) return const Text("加载中...");

    return PrimaryLayout(
      body: _OutfitBody(outfit: state.outfit),
      title: _OutfitTitle(title: state.title),
      chip: _OutfitChip(chipText: state.chipText),
    );
  }

  [@override](/user/override)
  Map<String, TileResourceProvider> resources(TileContext context, OutfitRecommendationState? state) => {
        'outfit_recommendation_body': TileResources.asset("assets/outfit/body.png"),
        'outfit_recommendation_title': TileResources.asset("assets/outfit/title.png"),
        'outfit_recommendation_chip': TileResources.asset("assets/outfit/chip.png"),
      };
}

更多关于Flutter穿搭推荐插件wearthat的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter穿搭推荐插件wearthat的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，作为IT专家，以下是如何在Flutter项目中集成和使用wearthat插件来进行穿搭推荐的代码示例。wearthat是一个假设的插件名称，用于说明目的，实际中可能不存在这个具体名称的插件。不过，我们可以模拟一个类似的流程，展示如何在Flutter应用中集成和使用一个自定义的穿搭推荐插件。

首先，假设我们有一个wearthat插件，它提供了获取穿搭推荐的功能。我们需要在pubspec.yaml文件中添加这个插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  wearthat: ^1.0.0  # 假设版本号为1.0.0

然后，运行flutter pub get来安装依赖。

接下来，我们在Flutter应用中编写代码来使用这个插件。假设wearthat插件提供了一个getOutfitRecommendations方法，它返回一个包含穿搭建议的列表。

import 'package:flutter/material.dart';
import 'package:wearthat/wearthat.dart';  // 导入wearthat插件

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

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

class OutfitRecommendationsScreen extends StatefulWidget {
  @override
  _OutfitRecommendationsScreenState createState() => _OutfitRecommendationsScreenState();
}

class _OutfitRecommendationsScreenState extends State<OutfitRecommendationsScreen> {
  List<String> _recommendations = [];

  @override
  void initState() {
    super.initState();
    _fetchRecommendations();
  }

  Future<void> _fetchRecommendations() async {
    try {
      // 假设getOutfitRecommendations方法返回一个Future<List<String>>
      List<String> recommendations = await WearThat.getOutfitRecommendations();
      setState(() {
        _recommendations = recommendations;
      });
    } catch (e) {
      print('Error fetching recommendations: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Outfit Recommendations'),
      ),
      body: _recommendations.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _recommendations.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_recommendations[index]),
                );
              },
            ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml文件中添加了wearthat插件的依赖。
  2. 在MyApp类中设置了应用的主题和主页。
  3. 创建了一个OutfitRecommendationsScreen有状态组件，用于显示穿搭推荐。
  4. 在_OutfitRecommendationsScreenState类中，使用initState方法调用_fetchRecommendations方法来获取穿搭推荐。
  5. _fetchRecommendations方法使用WearThat.getOutfitRecommendations()异步获取推荐列表，并在获取成功后更新状态。
  6. 在build方法中，根据_recommendations列表是否为空，显示加载指示器或穿搭推荐列表。

请注意，由于wearthat是一个假设的插件名称，实际使用时你需要替换为真实存在的插件，并根据插件的文档调整代码。如果插件提供了不同的方法或数据结构，你需要相应地修改代码。

回到顶部