Flutter分屏插件splitview_pxq的使用

Flutter分屏插件splitview_pxq的使用

Splitter view plugin

一个在dart中实现的分屏插件。

使用方法

要使用此插件，在您的 pubspec.yaml 文件中添加 splitview_pxq 作为依赖项。

dependencies:
  splitview_pxq: ^版本号

然后运行以下命令以获取更新的依赖项：

flutter pub get

示例代码

以下是一个完整的示例代码，展示如何使用 splitview_pxq 插件创建一个水平和垂直方向的分屏布局。

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

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

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

  // 这个小部件是应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取屏幕的高度和宽度
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: SplitViewPXQ(
          // 分隔符样式
          spliter: Container(color: Colors.pink,),
          // 分屏方向为水平
          direction: SplitViewDirection.horizontal,
          // 子控件的尺寸数组，最后一个尺寸不会被使用
          size: [200, 200, 0],
          // 分隔符的大小
          spliterSize: 20,
          // 分隔符是否重叠下一个子控件
          spliterOverlapSplitView: true,
          // 子控件列表
          children: [
            // 第一个子控件
            SplitViewPXQ(
              // 分隔符样式
              spliter: Container(color: Colors.deepPurple,),
              // 分屏方向为垂直
              direction: SplitViewDirection.vertical,
              // 子控件的尺寸数组，最后一个尺寸不会被使用
              size: [200, 200, 0],
              // 分隔符的大小
              spliterSize: 20,
              // 分隔符是否重叠下一个子控件
              spliterOverlapSplitView: false,
              // 子控件列表
              children: [
                // 第一个子控件
                Container(color: Colors.blue,),
                // 第二个子控件
                Container(color: Colors.tealAccent,),
                // 第三个子控件
                Container(color: Colors.purple,),
              ],
            ),
            // 第二个子控件
            Container(color: Colors.orangeAccent,),
            // 第三个子控件
            Container(color: Colors.yellow,),
          ],
        ),
      )
    );
  }
}

更多关于Flutter分屏插件splitview_pxq的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


splitview_pxq 是一个用于 Flutter 的分屏插件，允许你在应用中创建并管理分屏布局。它可以帮助你轻松地将屏幕分成多个部分，每个部分可以独立显示不同的内容或组件。

以下是如何使用 splitview_pxq 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 splitview_pxq 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  splitview_pxq: ^1.0.0  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 splitview_pxq 插件：

import 'package:splitview_pxq/splitview_pxq.dart';

3. 使用 SplitView

SplitView 是 splitview_pxq 插件中的核心组件，它允许你创建分屏布局。你可以通过设置 children 属性来指定每个分屏的内容。

以下是一个简单的示例，展示如何使用 SplitView 创建一个水平分屏布局：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SplitView Example'),
        ),
        body: SplitView(
          axis: Axis.horizontal,  // 水平分屏
          children: [
            Container(
              color: Colors.red,
              child: Center(child: Text('Left Panel')),
            ),
            Container(
              color: Colors.blue,
              child: Center(child: Text('Right Panel')),
            ),
          ],
        ),
      ),
    );
  }
}

4. 参数说明

SplitView 组件提供了一些可配置的参数，允许你自定义分屏布局：

  • axis: 分屏的方向，可以是 Axis.horizontal（水平分屏）或 Axis.vertical（垂直分屏）。
  • children: 分屏的子组件列表，通常包含两个或多个 Widget。
  • initialFraction: 初始分屏比例，默认值为 0.5。
  • minFraction: 最小分屏比例，默认值为 0.1。
  • maxFraction: 最大分屏比例，默认值为 0.9。
  • dividerColor: 分屏线的颜色。
  • dividerThickness: 分屏线的厚度。
  • onDragEnd: 当用户拖动分屏线结束时的回调函数。

5. 自定义分屏比例

你可以通过设置 initialFraction、minFraction 和 maxFraction 来控制分屏的比例。例如：

SplitView(
  axis: Axis.horizontal,
  initialFraction: 0.3,  // 初始比例为 30%
  minFraction: 0.2,      // 最小比例为 20%
  maxFraction: 0.8,      // 最大比例为 80%
  children: [
    Container(
      color: Colors.red,
      child: Center(child: Text('Left Panel')),
    ),
    Container(
      color: Colors.blue,
      child: Center(child: Text('Right Panel')),
    ),
  ],
)

6. 处理拖动事件

你可以通过 onDragEnd 回调来处理用户拖动分屏线的事件。例如，你可以在拖动结束后打印当前的分屏比例：

SplitView(
  axis: Axis.horizontal,
  onDragEnd: (double fraction) {
    print('Current split fraction: $fraction');
  },
  children: [
    Container(
      color: Colors.red,
      child: Center(child: Text('Left Panel')),
    ),
    Container(
      color: Colors.blue,
      child: Center(child: Text('Right Panel')),
    ),
  ],
)
回到顶部