Flutter锚定布局插件anchored的使用

Anchored package

这是一个提供小部件位置细节的包。

开始使用

在 pubspec.yaml 文件中添加依赖。

使用示例

以下是一个使用 anchored 插件的示例，它将一个菜单放置在 TextField 的后缀图标上方。

import 'package:flutter/material.dart';
import 'package:anchored/anchored.dart'; // 引入anchored包

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        suffixIcon: Anchored( // 使用Anchored小部件
          anchoredBuilder: (_, anchor, anchorCenter) { // anchor用于获取目标小部件的位置信息
            return IconButton(
              onPressed: () {
                showMenu( // 显示菜单
                  context: context,
                  position: RelativeRect.fromLTRB( // 设置菜单的位置
                    anchor.left, // 菜单左边界相对于目标小部件的左边界
                    anchor.top,  // 菜单上边界相对于目标小部件的上边界
                    anchor.right, // 菜单右边界相对于目标小部件的右边界
                    anchor.bottom // 菜单下边界相对于目标小部件的下边界
                  ),
                  items: const [ // 菜单项列表
                    PopupMenuItem(child: Text("复制")), // 第一项
                    PopupMenuItem(child: Text("粘贴")), // 第二项
                  ],
                );
              },
              icon: const Icon(Icons.arrow_drop_down), // 图标按钮
            );
          },
        ),
      ),
    );
  }
}

yibo5220 1楼•23 天前

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

在Flutter中，anchored 是一个用于实现锚定布局的插件。它允许你轻松地将一个Widget相对于另一个Widget进行定位，类似于CSS中的position: absolute。anchored 插件非常适合用于创建浮动菜单、工具提示、弹出层等UI元素。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  anchored: ^0.2.0

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

基本用法

anchored 插件提供了一个Anchored widget，你可以用它来将一个子widget锚定到另一个widget上。

以下是一个简单的示例，展示如何使用anchored插件将一个按钮锚定到另一个按钮的顶部：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Anchored Example')),
        body: Center(
          child: Anchored(
            anchor: Alignment.topCenter,
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Anchor Button'),
            ),
            anchored: ElevatedButton(
              onPressed: () {},
              child: Text('Anchored Button'),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

anchor: 指定锚点的位置。你可以使用Alignment类来定义锚点的位置，例如Alignment.topCenter、Alignment.bottomLeft等。
child: 这是锚定到的目标widget。
anchored: 这是需要被锚定的widget。

高级用法

你还可以通过offset参数来微调被锚定widget的位置。例如，你可以将anchored widget向下偏移10像素：

Anchored(
  anchor: Alignment.topCenter,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Anchor Button'),
  ),
  anchored: ElevatedButton(
    onPressed: () {},
    child: Text('Anchored Button'),
  ),
  offset: Offset(0, 10),
);