一统天下 flutter - 图形: 阴影

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - 图形: 阴影

示例如下:

lib\shape\shadow.dart

/*
 * 阴影
 *
 * BoxShadow - 阴影效果
 *   color - 阴影的颜色
 *   offset - 阴影的偏移量
 *   blurRadius - 阴影的延伸半径(有模糊效果)
 *   spreadRadius - 阴影的延伸半径(无模糊效果)
 *   blurStyle - 阴影的模糊效果
 *     BlurStyle.normal - 阴影的内部模糊,外部模糊,默认值
 *     BlurStyle.solid - 阴影的内部不模糊,外部模糊
 *     BlurStyle.outer - 阴影的内部透明,外部模糊
 *     BlurStyle.inner - 阴影的内部模糊,外部透明
 */

import 'package:flutter/material.dart';

class ShadowDemo extends StatefulWidget {
  const ShadowDemo({Key? key}) : super(key: key);

  @override
  _ShadowDemoState createState() => _ShadowDemoState();
}

class _ShadowDemoState extends State<ShadowDemo> {
  var _blurStyle = BlurStyle.normal;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 200,
          height: 50,
          decoration: const BoxDecoration(
            color: Colors.red,
            /// 周围均有阴影,且阴影模糊
            /// 注:BoxDecoration 的 boxShadow 属性是一个列表,可以叠加多种阴影效果
            boxShadow: [
              BoxShadow(
                color: Colors.green,
                blurRadius: 10,
              ),
            ],
          ),
        ),
        Container(
          width: 200,
          height: 50,
          decoration: const BoxDecoration(
            color: Colors.red,
            /// 周围均有阴影,且阴影不模糊
            /// 注:BoxDecoration 的 boxShadow 属性是一个列表,可以叠加多种阴影效果
            boxShadow: [
              BoxShadow(
                color: Colors.green,
                spreadRadius : 10,
              ),
            ],
          ),
        ),
        Container(
          width: 200,
          height: 50,
          decoration: const BoxDecoration(
            color: Colors.red,
            /// 阴影往右下角偏移,且阴影模糊
            /// 注:BoxDecoration 的 boxShadow 属性是一个列表,可以叠加多种阴影效果
            boxShadow: [
              BoxShadow(
                color: Colors.green,
                blurRadius: 10,
                offset: Offset(5, 5),
              ),
            ],
          ),
        ),
        GestureDetector(
          child: Container(
            width: 200,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.red,
              /// 本例用于演示阴影的各种模糊效果
              /// 注:BoxDecoration 的 boxShadow 属性是一个列表,可以叠加多种阴影效果
              boxShadow: [
                BoxShadow(
                  color: Colors.green,
                  blurRadius: 20,
                  offset: Offset(10, 10),
                  blurStyle: _blurStyle
                ),
              ],
            ),
            child: Text(
              "$_blurStyle",
              style: const TextStyle(
                fontSize: 14.0,
                color: Colors.white,
                decoration: TextDecoration.none
              ),
            ),
          ),
          onTap: () {
            setState(() {
              var index = _blurStyle.index + 1;
              if (index >= BlurStyle.values.length) {
                index = 0;
              }
              _blurStyle = BlurStyle.values[index];
            });
          },
        ),
      ],
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-03-22 11:20  webabcd  阅读(267)  评论(0编辑  收藏  举报