Flutter包装器功能插件wrapper的使用

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

Flutter包装器功能插件 Wrapper 的使用

1. 概述

Wrapper 是一个 Flutter 插件，它提供了一个带有尖角（或无尖角）的框，并且可以设置多种属性来定制外观。以下是关于如何使用这个插件的一些详细说明。

2. 属性一览

属性名 类型 默认值 简介
color Color Colors.green 框的颜色
spineType SpineType SpineType.left 尖角边枚举
child Widget null 子组件
angle double 75 针尖夹角
spineHeight double 10 尖角高度
offset double 15 偏移量
formEnd bool false 是否从尾部偏移
elevation double null 影深
shadowColor Color Colors.grey 阴影颜色
strokeWidth double null 边线宽
padding EdgeInsets EdgeInsets.all(5) 内边距
radius double 5 圆角半径

注意

  • Wrapper 的区域是由父容器控制的，Wrapper 本身并不承担定尺寸职责。

3. 针尖属性控制

通过针尖的开角和高度能实现对尖角更细致的控制。通过 offset 进行位移，考虑到有可能从尾向前偏移，使用 formEnd 控制。

Wrapper(
  color: Color(0xff95EC69),
  spineType: SpineType.bottom,
  spineHeight: 20,
  angle: 45,
  offset: 15,
  fromEnd: false,
  child: Text("张风捷特烈 " * 5),
)

4. 框阴影

注意：只有当 elevation 不为空的时候才能有阴影。

Wrapper(
  color: Colors.white,
  spineType: SpineType.right,
  elevation: 1,
  shadowColor: Colors.grey.withAlpha(88),
  child: Text("张风捷特烈 " * 5),
)

5. 边线边距

注意：当 strokeWidth 不为空时，会变为边线模式。

Wrapper(
  formEnd: true,
  padding: EdgeInsets.all(10),
  color: Colors.yellow,
  offset: 60,
  strokeWidth: 2,
  spineType: SpineType.bottom,
  child: Text("张风捷特烈 " * 5),
)

6. Wrapper.just

提供无针尖的构造方法，实现类似包裹的效果，可以包裹任意组件。

Wrapper.just(
  padding: EdgeInsets.all(2),
  color: Color(0xff5A9DFF),
  child: Text(
    "Lv3",
    style: TextStyle(color: Colors.white),
  ),
)

7. 尖端路径构造器

为了让组件更灵活，尖端路径的构造被提取出来，暴露接口，并提供默认路径。这样就可以自己定制尖端图形，提高拓展性。

Wrapper(
    spinePathBuilder: _spinePathBuilder,
    strokeWidth: 1.5,
    color: Color(0xff95EC69),
    spineType: SpineType.bottom,
    child: Text("张风捷特烈 " * 5)
),

Path _spinePathBuilder2(Canvas canvas, SpineType spineType, Rect range) {
  return Path()
    ..addOval(Rect.fromCenter(center: range.center, width: 10, height: 10));
}

8. 示例 Demo

以下是一个完整的示例代码，展示了如何在应用中使用 Wrapper 组件。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(),
          body: buildCenter(),
        ));
  }

  Center buildCenter() {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          buildColorTypeWrapper(),
          SizedBox(
            height: 10,
          ),
          buildSpineWrapper(),
          SizedBox(
            height: 10,
          ),
          buildShadowWrapper(),
          SizedBox(
            height: 10,
          ),
          buildLineWrapper(),
          SizedBox(
            height: 10,
          ),
          buildOtherWrapper(),
        ],
      ),
    );
  }

  Widget buildColorTypeWrapper() => Wrap(
    spacing: 10,
    children: [
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            formEnd: false,
            color: Color(0xff95EC69),
            spineType: SpineType.left,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            formEnd: false,
            color: Color(0xff97C0EC),
            spineType: SpineType.right,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            formEnd: false,
            color: Color(0xffEC6E5F),
            spineType: SpineType.top,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            formEnd: false,
            color: Color(0xffB6EC48),
            spineType: SpineType.bottom,
            child: Text("张风捷特烈 " * 5),
          )),
    ],
  );

  buildSpineWrapper() => Wrap(
    spacing: 10,
    children: [
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Color(0xff95EC69),
            spineType: SpineType.bottom,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Color(0xff95EC69),
            spineType: SpineType.bottom,
            offset: 60,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Color(0xff95EC69),
            spineType: SpineType.bottom,
            spineHeight: 20,
            angle: 45,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            formEnd: true,
            color: Color(0xff95EC69),
            spineType: SpineType.bottom,
            child: Text("张风捷特烈 " * 5),
          )),
    ],
  );

  buildShadowWrapper() => Wrap(
    spacing: 10,
    children: [
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Color(0xff95EC69),
            spineType: SpineType.bottom,
            elevation: 1,
            shadowColor: Colors.blueAccent.withAlpha(99),
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Colors.white,
            spineType: SpineType.right,
            elevation: 1,
            shadowColor: Colors.grey.withAlpha(88),
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Color(0xff95EC69),
            spineType: SpineType.bottom,
            elevation: 2,
            shadowColor: Colors.red.withAlpha(77),
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Colors.white,
            spineType: SpineType.bottom,
            elevation: 2,
            shadowColor: Colors.orangeAccent,
            child: Text("张风捷特烈 " * 5),
          )),
    ],
  );

  buildLineWrapper() => Wrap(
    spacing: 10,
    children: [
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Colors.red,
            spineType: SpineType.bottom,
            strokeWidth: 1,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Colors.blue,
            spineType: SpineType.right,
            strokeWidth: 2,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            color: Colors.green,
            spineType: SpineType.bottom,
            strokeWidth: 3,
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper(
            formEnd: true,
            padding: EdgeInsets.all(10),
            color: Colors.yellow,
            offset: 60,
            strokeWidth: 2,
            spineType: SpineType.bottom,
            child: Text("张风捷特烈 " * 5),
          )),
    ],
  );

  buildOtherWrapper() => Wrap(
    spacing: 10,
    children: [
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper.just(
            padding: EdgeInsets.all(2),
            color: Color(0xff5A9DFF),
            child: Text(
              "Lv3",
              style: TextStyle(color: Colors.white),
            ),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper.just(
            padding: EdgeInsets.all(2),
            color: Color(0xffFFA001),
            child: Text(
              "Lv5",
              style: TextStyle(color: Colors.white),
            ),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper.just(
            color: Colors.orangeAccent,
            strokeWidth: 1,
            child: Text("这是一个边线框"),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper.just(
            color: Color(0xff95EC69),
            child: Text("张风捷特烈 " * 5),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper.just(
            padding: EdgeInsets.all(2),
            color: Color(0xff5A9DFF),
            strokeWidth: 2,
            // radius: 29,
            child: Image.asset(
              "assets/images/icon_head.png",
              height: 60,
            ),
          )),
      Container(
          constraints: BoxConstraints(maxWidth: 200),
          child: Wrapper.just(
            padding: EdgeInsets.all(2),
            color: Color(0xff5A9DFF),
            strokeWidth: 2,
            radius: 31,
            child: Image.asset(
              "assets/images/icon_head.png",
              height: 60,
            ),
          )),
    ],
  );
}

更多关于Flutter包装器功能插件wrapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter包装器功能插件wrapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，包装器（Wrapper）功能插件通常用于为现有的Widget添加额外的功能或样式，而不改变其核心逻辑。一个常见的场景是使用包装器来应用全局主题、处理布局调整或添加动画效果。下面我将提供一个简单的代码示例，展示如何创建一个自定义的包装器插件，并在Flutter应用中使用它。

步骤 1: 创建自定义包装器

首先，我们创建一个自定义的包装器Widget。这个包装器将接受一个子Widget，并为其添加一个边框和一些内边距。

import 'package:flutter/material.dart';

class CustomWrapper extends StatelessWidget {
  final Widget child;
  final Color borderColor;
  final double borderRadius;
  final EdgeInsetsGeometry padding;

  const CustomWrapper({
    Key? key,
    required this.child,
    this.borderColor = Colors.grey,
    this.borderRadius = 8.0,
    this.padding = const EdgeInsets.all(16.0),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: borderColor, width: 1.0),
        borderRadius: BorderRadius.circular(borderRadius),
      ),
      padding: padding,
      child: child,
    );
  }
}

步骤 2: 在应用中使用自定义包装器

接下来，我们在Flutter应用中使用这个自定义的包装器。假设我们有一个简单的文本Widget，我们想使用CustomWrapper来装饰它。

import 'package:flutter/material.dart';
import 'custom_wrapper.dart'; // 假设上面的代码保存在custom_wrapper.dart文件中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Wrapper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Wrapper Demo'),
        ),
        body: Center(
          child: CustomWrapper(
            borderColor: Colors.blueAccent,
            borderRadius: 16.0,
            padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
            child: Text(
              'Hello, Flutter Wrapper!',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

解释

  1. CustomWrapper 类：这个类是一个无状态Widget，它接受一个child Widget和几个可选参数（borderColor, borderRadius, padding）。在build方法中，它返回一个Container，该容器应用了边框、圆角和内边距。

  2. MyApp 类：这是我们的主应用类。它创建了一个MaterialApp，并在其主页中使用Scaffold和AppBar。在body中，我们使用CustomWrapper来包装一个简单的Text Widget。

通过这种方式，你可以轻松创建和使用自定义的包装器插件，为Flutter应用中的Widget添加额外的样式和功能。这个示例只是一个简单的开始，你可以根据需要扩展和自定义包装器的功能。

回到顶部