Flutter多边框样式插件multi_border的使用

multi_border 是一个用于Flutter的自定义装饰器，能够快速为你的小部件添加多个不同颜色和宽度的边框。以下是该插件的主要功能、如何开始使用它以及一些示例代码。

功能

• 设置每个边框的颜色。
• 设置每个边框的宽度。
• 设置矩形边框的圆角半径。
• 支持矩形或圆形边框。
• MultiBorderDecoration.evenBorders() 构造函数简化了创建等宽边框的过程。

开始使用

导入依赖

首先，在项目的pubspec.yaml文件中添加multi_border依赖，并运行flutter pub get来安装包。然后在你的Dart文件中导入：

import 'package:multi_border/multi_border.dart';

添加多边框到Container

以下是如何将MultiBorderDecoration添加到一个Container的例子：

Container(
  decoration: MultiBorderDecoration(
    borderSides: [
      BorderSide(color: Colors.blue.shade100, width: 8),
      BorderSide(color: Colors.blue.shade200, width: 12),
      BorderSide(color: Colors.blue.shade300, width: 16)
    ],
  ),
  child: const Text('Wrap me with colorful borders'),
);

如果你想创建宽度相同的边框，可以使用MultiBorderDecoration.evenBorders()构造函数：

Container(
  decoration: MultiBorderDecoration.evenBorders(
    width: 8,
    borderColors: [
      Colors.blue.shade100,
      Colors.blue.shade200,
      Colors.blue.shade300,
    ],
  ),
  child: const Text('Wrap me with colorful borders'),
);

示例Demo

下面是一个完整的示例程序，展示了如何在不同的形状（如矩形、圆角矩形和圆形）上应用不同宽度和颜色的边框。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'MultiBorderDecoration Examples',
      home: Scaffold(
        body: Center(child: Examples()),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: _examples.length,
      separatorBuilder: (_, __) => const SizedBox(height: 24),
      itemBuilder: (_, i) => Center(child: _examples[i]),
    );
  }

  List<Widget> get _examples => [
        _rectangleEvenBorders,
        _roundedRectangleEvenBorders,
        _roundedRectangleVaryingBorders,
        _circleVaryingBorders,
        _circleEvenBorders,
      ];

  List<Color> get _borderColors => const [
        Color(0xFFF14A42),
        Color(0xFFF27D3B),
        Color(0xFFF2A83A),
        Color(0xFFF8C43F),
      ];

  List<BorderSide> get _borderSides => const [
        BorderSide(color: Color(0xFFF14A42), width: 4),
        BorderSide(color: Color(0xFFF27D3B), width: 8),
        BorderSide(color: Color(0xFFF2A83A), width: 12),
        BorderSide(color: Color(0xFFF8C43F), width: 16),
      ];

  Container get _rectangleEvenBorders => Container(
        decoration: MultiBorderDecoration.evenBorders(
          width: 8,
          borderColors: _borderColors,
        ),
        child: _child,
      );

  Container get _roundedRectangleEvenBorders => Container(
        clipBehavior: Clip.hardEdge,
        decoration: MultiBorderDecoration.evenBorders(
          width: 8,
          innerRadius: BorderRadius.circular(8),
          borderColors: _borderColors,
        ),
        child: _child,
      );

  Container get _roundedRectangleVaryingBorders => Container(
        clipBehavior: Clip.hardEdge,
        decoration: MultiBorderDecoration(
          borderSides: _borderSides,
          innerRadius: const BorderRadius.only(
            topLeft: Radius.circular(16),
            bottomRight: Radius.circular(16),
          ),
        ),
        child: _child,
      );

  Container get _circleEvenBorders => Container(
        clipBehavior: Clip.antiAlias,
        decoration: MultiBorderDecoration.evenBorders(
          boxShape: BoxShape.circle,
          width: 8,
          borderColors: _borderColors,
        ),
        child: _child,
      );

  Container get _circleVaryingBorders => Container(
        clipBehavior: Clip.antiAlias,
        decoration: MultiBorderDecoration(
          boxShape: BoxShape.circle,
          borderSides: _borderSides,
        ),
        child: _child,
      );

  Container get _child => Container(
        width: 100,
        height: 100,
        color: const Color(0xFF4B3D2F),
        child: const Icon(Icons.thumb_up, color: Color(0xFFCEC1B6)),
      );
}