Flutter对角线装饰插件diagonal_decoration的使用

您可以使用纯色或渐变作为背景，但还有第三种选项可以让您的应用程序看起来更加有趣。可以使用此DiagonalDecoration或MatrixDecoration为容器创建自定义背景。

安装

在您的 pubspec.yaml 文件中添加依赖项：

dependencies:
  diagonal_decoration: ^1.0.2

基本用法

只需将 DiagonalDecoration 或 MatrixDecoration 添加到 Container 的 decoration 参数中：

return Container(
  width: 200,
  height: 200,
  decoration: DiagonalDecoration(),
);

高级用法

您可以通过设置更多的参数来自定义对角线装饰的效果。例如：

decoration: const DiagonalDecoration(
   lineColor: Colors.black,
   backgroundColor: Colors.grey,
   radius: Radius.circular(20),
   lineWidth: 1,
   distanceBetweenLines: 5,
)

完整示例代码

以下是一个完整的示例代码，展示了如何使用 DiagonalDecoration 和 MatrixDecoration：

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

void main() {
  runApp(const MainApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const SizedBox(height: 80),
            const Text('对角线装饰',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 20),
            diagonalContainer(),
            const SizedBox(height: 40),
            const Text('矩阵装饰',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 20),
            matrixContainer(),
            const SizedBox(height: 40),
          ],
        ),
      )),
    );
  }

  Container diagonalContainer() {
    Widget tile(String title, String subtitle, IconData icon) {
      return Row(
        children: [
          Icon(icon),
          const SizedBox(width: 15),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(title),
              const SizedBox(height: 5),
              Text(subtitle,
                  style: const TextStyle(
                      fontWeight: FontWeight.bold, fontSize: 16)),
            ],
          )
        ],
      );
    }

    return Container(
        margin: const EdgeInsets.symmetric(horizontal: 36),
        padding: const EdgeInsets.all(25),
        decoration: const DiagonalDecoration(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('主要功能',
                style: TextStyle(fontSize: 15, color: Colors.grey.shade600)),
            const SizedBox(height: 20),
            tile('多币种账户', '29种货币', Icons.wallet),
            const SizedBox(height: 20),
            tile('免费卡片', '1张虚拟卡 + 1张实体卡',
                Icons.currency_exchange),
          ],
        ));
  }

  Container matrixContainer() {
    return Container(
      width: 240,
      height: 160,
      padding: const EdgeInsets.all(20),
      decoration: const MatrixDecoration(),
      child: const Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text(
            '温度',
            style: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 10),
          Text(
            '在乌克兰 🇺🇦',
            style: TextStyle(
              fontSize: 15,
            ),
          ),
          SizedBox(height: 10),
          Text(
            '32°C',
            style: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}