Flutter UI组件插件oghref_fluent的使用

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

Flutter UI组件插件oghref_fluent的使用

Fluent主题丰富的信息链接组件在Flutter中使用

标题： Fluent themed rich information link widgets in Flutter

内容：

  • 图片展示： oghref_fluent版本

  • 提供Fluent主题的信息链接组件。

设置

基础设置

  1. 添加依赖到pubspec.yaml：
dependencies:
  oghref_fluent: ^1.0.0 # 最新版本
  # 如果需要自定义解析器，请添加以下依赖：
  oghref_model: ^2.0.1
  1. 配置平台配置文件（(platforms manifest files)
  2. 在runApp之前进行初始化：
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  OgHrefFluentBinding.ensureInitialized();

  runApp(const App());
}
  1. 根据偏好实现OgHrefFluentCard或OgHrefFluentTile，参考示例代码：
import 'package:flutter/material.dart';
import 'package:oghref_fluent/oghref_fluent.dart';

class OgHrefFluentExampleApp extends StatelessWidget {
  const OgHrefFluentExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ThemePreference(),
      builder: (context, child) {
        final pref = context.watch<ThemePreference>();

        return MaterialApp(
          home: const OgHrefFluentExampleHome(),
          themeMode: pref.darkMode ? ThemeData.dark() : ThemeData.light(),
          theme: ThemeData()
              .copyWith(scaffoldBackgroundColor: Colors.blue.lightest),
          darkTheme: ThemeData.dark(),
        );
      },
    );
  }
}

高级设置

  • 如果使用自定义属性解析器，请在初始化和runApp之间附加解析器到MetaFetch：
MetaFetch().register(const CustomParser());

使用方法

请参考wiki页面。

示例代码：

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ThemePreference(),
      builder: (context, child) {
        final pref = context.watch<ThemePreference>();

        return MaterialApp(
          home: const OgHrefFluentExampleHome(),
          themeMode: pref.darkMode ? ThemeData.dark() : ThemeData.light(),
          theme: ThemeData()
              .copyWith(scaffoldBackgroundColor: Colors.blue.lightest),
          darkTheme: ThemeData.dark(),
        );
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Fluent UI组件插件oghref_fluent的使用')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 示例代码结束
          },
          child: Text('点击我'),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用oghref_fluent插件来集成Fluent Design UI组件的示例代码。请注意，oghref_fluent并不是一个广泛认知的标准Flutter插件，所以我将假设你指的是一个自定义或第三方插件，用于在Flutter中实现Fluent Design风格的UI组件。如果这不是你具体指的插件，请根据实际情况进行调整。

首先，确保你已经在pubspec.yaml文件中添加了该插件的依赖项。由于oghref_fluent不是一个官方或广泛认知的插件，这里我将使用一个假设的依赖项名称fluent_ui作为示例（请替换为实际的插件名称）：

dependencies:
  flutter:
    sdk: flutter
  fluent_ui: ^x.y.z  # 替换为实际的版本号

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

接下来，在你的Flutter项目中导入并使用该插件。以下是一个简单的示例，展示如何使用Fluent Design风格的按钮组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FluentApp(
      title: 'Fluent Design Demo',
      theme: FluentThemeData(
        // 配置Fluent主题
        brightness: Brightness.light,
        primaryColor: FluentColors.systemBaseHigh,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: FluentAppBar(
        title: Text('Fluent Design UI Components'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用Fluent风格的按钮
            FluentButton(
              onPressed: () {
                // 按钮点击事件
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Button clicked!')),
                );
              },
              child: Text('Fluent Button'),
            ),
            // 其他Fluent风格的组件
            // FluentTextField(), FluentCheckBox(), 等
          ],
        ),
      ),
    );
  }
}

在上面的代码中，我们创建了一个简单的Flutter应用，它使用了Fluent Design风格的AppBar和Button组件。请注意，由于fluent_ui是一个假设的插件名称，实际使用时你需要替换为oghref_fluent或你实际使用的插件名称，并根据该插件的文档调整代码。

  • FluentApp 和 FluentThemeData 用于配置Fluent Design主题。
  • FluentAppBar 和 FluentButton 是Fluent Design风格的组件。

确保你查阅了oghref_fluent（或你实际使用的插件）的官方文档，以获取更详细的组件列表和使用说明。如果插件提供了其他组件（如文本字段、复选框等），你可以按照类似的方式在Flutter项目中使用它们。

回到顶部