Flutter响应式UI插件qonvex_responsive_ui的使用

Qonvex Responsive UI

一个用于简化开发，并减少构建具有YouTube和Facebook类似主界面的应用程序时间的Flutter包，旨在实现响应式和类似Vue的显示。

安装

该插件已经发布在Pub.dev上。你可以通过以下命令将其添加到你的pubspec.yaml文件中：

dependencies:
  qonvex_responsive_ui: ^版本号

然后运行以下命令来安装：

flutter pub get

如何使用

导入

首先，你需要导入该包到你的项目中：

import 'package:qonvex_responsive_ui/qonvex_responsive_ui.dart';

类型

以下是可用的类型及其对应的命令：

注意: 默认类型为YouTube。

图片示例

YouTube

• Web

  

• 平板

  

• 移动设备

  

Facebook

• Web

  

• 移动设备

  

调用

使用QonvexResponsiveUi组件来创建响应式UI，示例如下：

QonvexResponsiveUi(
  settings: QonvexUISettings(
    appHeaderActions: [
      // 如果你有头部操作按钮，可以在这里添加
      // 这是可选的
      IconButton(onPressed: () {}, icon: Icon(Icons.search)),
      IconButton(onPressed: () {}, icon: Icon(Icons.message))
    ],
    appLogo: NetworkImage("https://www.strunkmedia.com/wp-content/uploads/2018/05/bigstock-Print-163213010.png"),
    foregroundColor: Colors.grey.shade100,
  ),
  type: QonvexUIType.youtube, // 如果未指定，默认为YouTube
  items: [
    // 必须包含的QonvexItem
    QonvexItem(
      icon: Icons.space_dashboard,
      title: "Dashboard",
      child: Container(
        color: Colors.red,
      ),
    ),
    QonvexItem(
      icon: Icons.home_filled,
      title: "Home",
      child: Container(
        color: Colors.blue,
      ),
    ),
    QonvexItem(
      icon: Icons.person_outline,
      title: "Profile",
      child: Container(
        color: Colors.green,
      ),
    ),
    QonvexItem(
      icon: Icons.settings,
      title: "Settings",
      child: Container(
        color: Colors.orange,
      ),
    ),
  ],
);

示例代码

以下是一个完整的示例代码，展示了如何使用qonvex_responsive_ui插件来构建响应式UI：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Qonvex Responsive UI Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return QonvexResponsiveUi(
      settings: QonvexUISettings(
        appHeaderActions: [
          IconButton(onPressed: () {}, icon: Icon(Icons.search)),
          IconButton(onPressed: () {}, icon: Icon(Icons.message))
        ],
        appLogo: NetworkImage(
            "https://www.strunkmedia.com/wp-content/uploads/2018/05/bigstock-Print-163213010.png"),
        foregroundColor: Colors.grey.shade100,
      ),
      type: QonvexUIType.youtube,
      items: [
        QonvexItem(
          icon: Icons.space_dashboard,
          title: "Dashboard",
          child: Container(
            color: Colors.red,
          ),
        ),
        QonvexItem(
          icon: Icons.home_filled,
          title: "Home",
          child: Container(
            color: Colors.blue,
          ),
        ),
        QonvexItem(
          icon: Icons.person_outline,
          title: "Profile",
          child: Container(
            color: Colors.green,
          ),
        ),
        QonvexItem(
          icon: Icons.settings,
          title: "Settings",
          child: Container(
            color: Colors.orange,
          ),
        ),
      ],
    );
  }
}