Flutter透明度设置插件setalpha的使用

Flutter透明度设置插件setalpha的使用

setalpha 是一个方便的包，用于设置和访问 Web 颜色，调整给定颜色的透明度，并混合新的颜色。

示例

示例 1：获取颜色属性

final ps = ColorProperties(Color.cornflowerBlue);
print("""
       Color: $ps

         Red: ${ps.red}
       Green: ${ps.green}
        Blue: ${ps.blue}
       Alpha: ${ps.alpha}
      Chroma: ${ps.chroma}
         Hue: ${ps.hueInDegrees}
   Intensity: ${ps.intensity}
   Lightness: ${ps.lightness}
  Saturation: ${ps.saturation}
  """);

输出：

       Color: #6495EDFF

         Red: 100
       Green: 149
        Blue: 237
       Alpha: 1.0
      Chroma: 0.5372549019607844
         Hue: 218.54014598540147
   Intensity: 0.6352941176470589
   Lightness: 0.6607843137254902
  Saturation: 0.7919075144508672

示例 2：改变颜色并获取属性

// 改变 ColorProperties 实例指向的颜色...
ps.color = "rgba(50,150,200,0.75)";
print("""
       Color: $ps

         Red: ${ps.red},
       Green: ${ps.green}
        Blue: ${ps.blue}
       Alpha: ${ps.alpha}
      Chroma: ${ps.chroma}
         Hue: ${ps.hueInDegrees}
   Intensity: ${ps.intensity}
   Lightness: ${ps.lightness}
  Saturation: ${ps.saturation}
  """);

输出：

       Color: #3296C8BF

         Red: 50,
       Green: 150
        Blue: 200
       Alpha: 0.7490196078431373
      Chroma: 0.5882352941176471
         Hue: 199.99999999999997
   Intensity: 0.5228758169934641
   Lightness: 0.49019607843137253
  Saturation: 0.6000000000000001

示例 3：设置透明度

print(setAlpha(Color.cornflowerBlue, 0.5));

输出：

#6495ED80

示例 4：处理其他格式

print(setAlpha("#6495ED", 0.5));
print(setAlpha("hsl(218.54deg, 79%, 66%)", 0.5));

输出：

#6495ED80
#6495ED80

使用说明

简单使用示例：

  • 获取颜色属性：

    final ps = ColorProperties(Color.cornflowerBlue);
print("""
       Color: $ps

         Red: ${ps.red}
       Green: ${ps.green}
        Blue: ${ps.blue}
       Alpha: ${ps.alpha}
      Chroma: ${ps.chroma}
         Hue: ${ps.hueInDegrees}
   Intensity: ${ps.intensity}
   Lightness: ${ps.lightness}
  Saturation: ${ps.saturation}
""");

  • 改变颜色并获取属性：

    // 改变 ColorProperties 实例指向的颜色...
ps.color = "rgba(50,150,200,0.75)";
print("""
       Color: $ps

         Red: ${ps.red},
       Green: ${ps.green}
        Blue: ${ps.blue}
       Alpha: ${ps.alpha}
      Chroma: ${ps.chroma}
         Hue: ${ps.hueInDegrees}
   Intensity: ${ps.intensity}
   Lightness: ${ps.lightness}
  Saturation: ${ps.saturation}
""");

  • 设置透明度：

    print(setAlpha(Color.cornflowerBlue, 0.5));

  • 处理其他格式：

    print(setAlpha("#6495ED", 0.5));
print(setAlpha("hsl(218.54deg, 79%, 66%)", 0.5));

完整示例

import 'package:setalpha/setalpha.dart';

void main() {
  final steps = 10,
      from = Color.slateBlue,
      to = Color.lightGoldenrodYellow,
      textColor = (String color) {
        final ps = ColorProperties(color), luma = ps.luma;
        return (ps.luma < 0.7) ? "white" : "black";
      },
      colorMerge = [
        for (var i = 0; i <= steps; i++) colorMix([from, to], [steps - i, i])
      ];

  print(
      "<div style='background: $from; color: ${textColor(from)}'>$from</div>");
  for (final color in colorMerge) {
    print(
        """<div style="background: $color; color: ${textColor(color)}">Mixing...</div>""");
  }
  print("<div style='background: $to; color: ${textColor(to)}'>$to</div>");
}

输出：

<div style='background: slateblue; color: white'>slateblue</div>
<div style="background: #6A5ACDFF; color: white">Mixing...</div>
<div style="background: #786ACEFF; color: white">Mixing...</div>
<div style="background: #877ACEFF; color: white">Mixing...</div>
<div style="background: #958ACFFF; color: white">Mixing...</div>
<div style="background: #A49ACFFF; color: white">Mixing...</div>
<div style="background: #B2AAD0FF; color: white">Mixing...</div>
<div style="background: #C0BAD0FF; color: black">Mixing...</div>
<div style="background: #CFCAD1FF; color: black">Mixing...</div>
<div style="background: #DDDAD1FF; color: black">Mixing...</div>
<div style="background: #ECEAD2FF; color: black">Mixing...</div>
<div style="background: #FAFAD2FF; color: black">Mixing...</div>
<div style='background: lightgoldenrodyellow; color: black'>lightgoldenrodyellow</div>

更多关于Flutter透明度设置插件setalpha的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter透明度设置插件setalpha的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，你可以使用Opacity小部件来设置透明度。Opacity小部件允许你通过opacity属性来设置子小部件的透明度，取值范围从0.0（完全透明）到1.0（完全不透明）。

Opacity小部件的使用示例

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('Flutter Opacity Example'),
        ),
        body: Center(
          child: Opacity(
            opacity: 0.5, // 设置透明度为50%
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello, Flutter!',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

解释：

  • opacity: 0.5：设置透明度为50%。
  • Container：一个带有背景颜色和文本的小部件。
  • Text：显示在容器中间的文本。

其他方法：

如果你想要更细粒度的控制，可以使用Color类的withOpacity方法来设置颜色的透明度。

Container(
  width: 200,
  height: 200,
  color: Colors.blue.withOpacity(0.5), // 设置颜色透明度为50%
  child: Center(
    child: Text(
      'Hello, Flutter!',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
)
回到顶部