Flutter自定义定位插件adjustable_positioned的使用

Flutter自定义定位插件adjustable_positioned的使用

特性

  • 可以根据用户输入重新定位您的小部件。
  • 可以调整小部件的大小。
  • 可以自定义拖动手柄。

开始使用

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
    adjustable_positioned: '^1.0.0'

2. 安装依赖

可以通过命令行安装依赖包：

$ pub get

或者使用支持 pub 的编辑器进行安装，并查阅相关文档了解更多信息。

3. 导入包

在 Dart 文件中导入：

import 'package:adjustable_positioned/adjustable_positioned.dart';

使用示例

以下是一个完整的示例，展示如何使用 AdjustablePositionedWidget 来创建一个可拖动并调整大小的小部件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var handleSize = 24.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adjustable Positioned Widget 示例'),
      ),
      body: Stack(
        children: [
          // 背景内容（可选）
          Positioned.fill(
            child: Container(
              color: Colors.grey.shade200,
            ),
          ),

          // 自定义可调整位置和大小的小部件
          AdjustablePositionedWidget<Object>(
            startX: 48,       // 初始 X 坐标
            startY: 64,       // 初始 Y 坐标
            startW: 128,      // 初始宽度
            startH: 128,      // 初始高度
            minW: 64,         // 最小宽度
            minH: 64,         // 最小高度
            activeAdjustmentCallback: (rect) {
              print("正在调整位置: $rect");
            }, // 调整过程中回调
            finishedAdjustmentCallback: (rect) {
              print("调整完成: $rect");
            }, // 调整完成后回调
            handleWidgetBuilder: (context, handleId) => const Icon(Icons.circle), // 拖动手柄样式
            handleSize: handleSize, // 拖动手柄大小
            dragData: null, // 拖动数据（可选）
            child: Padding(
              padding: EdgeInsets.all(handleSize), // 外部填充
              child: Container(
                color: Colors.red, // 小部件颜色
              ),
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter自定义定位插件adjustable_positioned的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


adjustable_positioned 是一个用于 Flutter 的自定义定位插件，它允许你在一个 Stack 中更加灵活地定位子组件。与 Flutter 自带的 Positioned 组件相比，adjustable_positioned 提供了更多的控制选项，例如动态调整位置、大小以及边界限制等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  adjustable_positioned: ^1.0.0  # 请使用最新版本

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

基本用法

adjustable_positioned 提供了 AdjustablePositioned 组件，你可以在 Stack 中使用它来定位子组件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AdjustablePositioned Example'),
        ),
        body: Center(
          child: Stack(
            children: [
              AdjustablePositioned(
                left: 50,
                top: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
              AdjustablePositioned(
                right: 50,
                bottom: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

AdjustablePositioned 提供了以下参数来控制子组件的位置和大小：

  • left: 距离父容器左边的距离。
  • top: 距离父容器顶部的距离。
  • right: 距离父容器右边的距离。
  • bottom: 距离父容器底部的距离。
  • width: 子组件的宽度。
  • height: 子组件的高度。
  • child: 要定位的子组件。

动态调整

你可以通过状态管理来动态调整组件的位置和大小。例如：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double left = 50;
  double top = 50;

  void _moveBox() {
    setState(() {
      left += 10;
      top += 10;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AdjustablePositioned Example'),
        ),
        body: Center(
          child: Stack(
            children: [
              AdjustablePositioned(
                left: left,
                top: top,
                child: GestureDetector(
                  onTap: _moveBox,
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.blue,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，每次点击蓝色方块时，它的位置会向右下方移动。

边界限制

AdjustablePositioned 还支持边界限制，确保子组件不会超出父容器的范围。你可以使用 minLeft, maxLeft, minTop, maxTop 等参数来设置边界。

AdjustablePositioned(
  left: left,
  top: top,
  minLeft: 0,
  maxLeft: 200,
  minTop: 0,
  maxTop: 200,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)
回到顶部