Flutter设计原型交互插件adobe_xd的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter设计原型交互插件adobe_xd的使用

通过Adobe XD中的XD to Flutter插件，可以根据你的设计生成用于构建Flutter应用的代码。本包包含插件使用的辅助小部件。

Pin

Pin 类允许你指定一个基于响应式调整模型的高度灵活布局。你可以通过水平和垂直的 Pin 实例（hPin / vPin）来定义布局。

使用示例

Pin(start: 10.0, end: 10.0)

这段代码将使子组件在父组件的每边留出10像素的空间。

Pin(startFraction: 0.2, endFraction: 0.1)

这段代码将使子组件的左边缘位于其父组件宽度的20%，右边缘位于90%。

Pin(start: 25.0, endFraction: 0.6)

这段代码将使子组件的左边距为25像素，右边距为其父组件宽度的60%。

Pin(start: 50.0, size: 100.0)
Pin(size: 80.0, endFraction: 0.2)

这段代码将使子组件从左边距50像素处开始，宽度为100像素；另一段代码将使子组件的宽度固定为80像素，并且右边距为父组件宽度的20%。

Pin(middle: 0.5, size: 50.0)
Pin(middle: 1.0, size: 50.0)

这两段代码将使子组件居中，宽度为50像素。第二段代码将使子组件的右边缘与父组件的右边缘对齐。

Pin(start: 0.0, end: 0.0)

这段代码表示空的 Pin 默认填充全部可用区域。

Pinned

Pinned 小部件实现了Adobe XD中的响应式调整模型。你可以用它来将子组件的边缘固定在其可用空间内，也可以将其中心固定在其可用空间内，或者给它一个固定的大小。

使用示例

Pinned.fromPins(
	Pin(start: 10.0, endFraction: 0.75), // 水平
	Pin(middle: 0.5, size: 50.0), // 垂直
	child: Text("Hello!"),
)

这段代码将使文本“Hello!”从左边距10像素处开始，并且在父组件宽度的75%处结束，同时将其垂直居中并设置高度为50像素。

Pinned(
	left: 10.0,
	rightFraction: 0.75,
	verticalMiddle: 0.5,
	height: 50.0,
	child: Text("Hello!"),
)

这段代码等同于上面的 Pinned.fromPins 示例。

Pinned.fromSize(
	size: Size(width: 100.0, height: 100.0), // 父组件的名义尺寸
	bounds: Rect.fromLTWH(10.0, 25.0, 65.0, 50.0), // 子组件在父组件内的名义边界
	pinLeft: true, // 左边距为绝对像素位置
	// 右边距未指定，默认为相对位置
	fixedHeight: true, // 使用固定高度和垂直居中，因为没有指定顶部或底部
	child: Text("Hello!"),
)

这段代码计算了子组件的位置和大小，并使其与上面的示例结果相同。

BlendMask

BlendMask 小部件可以对其子组件应用混合模式。

使用示例

BlendMask(
	blendMode: BlendMode.overlay,
	child: Text("Hello!"),
)

这段代码将文本“Hello!”的混合模式设置为 BlendMode.overlay。

PageLink

PageLink 小部件使你可以实现从Adobe XD导出的原型交互和导航。

使用示例

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'XD to Flutter example',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Home(
        onTapAdventure: () => print("You tapped the Latest Adventure."),
      ), 
    );
  }
}

更多关于Flutter设计原型交互插件adobe_xd的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter设计原型交互插件adobe_xd的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter开发中，Adobe XD 是一个非常流行的设计原型工具，它能够帮助开发者快速创建和预览UI设计。虽然Adobe XD本身并不直接生成Flutter代码，但可以通过一些插件和工具将设计转化为Flutter代码，从而实现设计与开发的无缝衔接。

以下是一个使用Adobe XD设计原型，并借助插件将设计导出为Flutter代码的简单流程示例。这里我们将使用一个流行的插件叫做 Flutter XD Plugin，它允许你将Adobe XD中的设计导出为Flutter的Dart代码。

步骤 1: 安装Adobe XD插件

  1. 打开Adobe XD。
  2. 前往 Plugins 菜单，选择 Discover Plugins...。
  3. 在插件市场中搜索 Flutter，找到并安装 Flutter XD Plugin。

步骤 2: 在Adobe XD中设计UI

  1. 使用Adobe XD设计你的UI界面。
  2. 确保你的设计使用了Adobe XD中的矢量图形和文本对象，因为这些对象更容易被导出为Flutter代码。

步骤 3: 导出为Flutter代码

  1. 完成设计后，选择你想要导出的设计元素或整个画板。
  2. 在Adobe XD的顶部菜单中，点击 Plugins，然后选择 Flutter > Export Flutter Code。
  3. 在弹出的对话框中，选择导出的目标位置，并配置一些选项（如代码格式、文件命名等）。
  4. 点击 Export 按钮，插件将生成对应的Flutter Dart代码。

示例代码

假设你导出了一个简单的按钮设计，生成的Flutter Dart代码可能类似于以下形式：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Adobe XD to Flutter Example'),
        ),
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Color(0xFF4CAF50)),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
          ),
        ),
      ),
    );
  }
}

注意事项

  • 插件生成的代码可能需要根据实际需要进行调整和优化。
  • 确保你的Adobe XD和Flutter环境都是最新版本，以兼容最新的插件功能。
  • 如果设计包含复杂的动画或交互效果，可能需要手动在Flutter代码中实现这些效果。

通过上述流程，你可以快速将Adobe XD中的设计转化为Flutter代码，从而加速开发过程。希望这个示例对你有所帮助！

回到顶部