Flutter分屏视图插件based_split_view的使用

Flutter分屏视图插件based_split_view的使用

介绍

based_split_view 是一个基于 Flutter 的分屏视图小部件，它可以帮助你在大屏幕设备（如 Telegram、QQ 或 Discord）上创建分屏视图。该插件灵感来源于 flutter_split_view。

截图

你可以尝试 在线示例应用 来查看效果。

如何使用

1. 安装 based_split_view

   在你的 pubspec.yaml 文件中添加 based_split_view 依赖：

   dependencies:
     based_split_view: ^latest_version
   

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

2. 使用 BasedSplitView

   下面是一个完整的示例代码，展示了如何在项目中使用 BasedSplitView：

   import 'package:flutter/material.dart';
   import 'package:based_split_view/based_split_view.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Based Split View Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
     final GlobalKey leftKey = GlobalKey();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Based Split View Demo'),
         ),
         body: BasedSplitView(
           navigatorKey: navigatorKey,
           leftWidget: LeftWidget(key: leftKey),
           rightWidget: RightWidget(),
           initialWidth: 300, // 设置初始宽度
           minLeftWidth: 200, // 设置左侧最小宽度
           maxLeftWidth: 400, // 设置左侧最大宽度
           onDragEnd: (details) {
             print('拖动结束: ${details.width}');
           },
           onDragUpdate: (details) {
             print('拖动中: ${details.width}');
           },
           onDragStart: (details) {
             print('开始拖动: ${details.width}');
           },
         ),
       );
     }
   }
   
   class LeftWidget extends StatelessWidget {
     final GlobalKey key;
   
     LeftWidget({required this.key});
   
     @override
     Widget build(BuildContext context) {
       return Container(
         color: Colors.blue[100],
         child: Center(
           child: Text(
             '左侧视图',
             style: TextStyle(fontSize: 24),
           ),
         ),
       );
     }
   }
   
   class RightWidget extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Container(
         color: Colors.grey[100],
         child: Center(
           child: Text(
             '右侧视图',
             style: TextStyle(fontSize: 24),
           ),
         ),
       );
     }
   }