日益努力,而后风生水起|

Flutter不常用组件(二)

ColoredBox

一般我们想要一个带有背景颜色的组件我们会使用哪个组件?当然第一个想到的就是Container。其实在 Flutter 中还要一个专门用来设置颜色的组件ColoredBox

该组件有以下几个属性:

  • Key? key:标识键
  • Color color:颜色
  • Widget? child:子组件
const ColoredBox(
  color: Colors.blue,
  child: SizedBox.expand(),
),

image

ColorFiltered

颜色滤镜。

该组件有以下几个属性:

  • Key? key:标识键
  • ColorFilter colorFilter:颜色滤镜
  • Widget? child:子元素
ColorFiltered(
  colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.color),
  child: Image.asset("assets/images/hmbb.png", fit: BoxFit.cover),
),

image

CompositedTransformFollower 和 CompositedTransformTarget

可以让CompositedTransformFollower组件跟随 CompositedTransformTarget组件移动

关于这两个组件的用法可以查看

文章:Flutter 组件 | 手牵手,一起走 CompositedTransformFollower 与 CompositedTransformTarget

视频:Flutter:如何使用Layer Link(CompositedTransformFollower、CompositedTransformTarget)

GridPaper

绘制1px宽的直线网格

  • Key? key:标识键
  • Color color:网格线条的颜色。默认值为Color(0x7FC3E8F3)
  • double interval:网格中主线之间的距离,以逻辑像素为单位
  • int divisions = 2:每个主网格单元内的主要分区数。默认值为2
  • int subdivisions = 5:默认值为5
  • Widget? child:子组件
const SizedBox.expand(
  child: GridPaper(
    color: Colors.blue,
    interval: 100.0,
    divisions: 2,
    subdivisions: 5,
    child: Text("Hello World 你好世界"),
  ),
),

image

GridTile

一个带有 header 和 footer 的组件,一般放在GridView中使用,当然也可以单独使用。

  • Key? key:标识键
  • Widget? header:头部的组件
  • Widget? footer:尾部的组件
  • Widget child:子组件(中间的组件)
GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
  ),
  itemBuilder: (context, index) {
    return GridTile(
      header: Align(
        alignment: Alignment.topLeft,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 4),
          margin: const EdgeInsets.all(4),
          decoration: const BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.all(Radius.circular(2)),
          ),
          child: const Text(
            "Hot",
            style: TextStyle(color: Colors.white, fontSize: 12),
          ),
        ),
      ),
      footer: Container(
        color: Colors.white.withOpacity(.8),
        alignment: Alignment.center,
        child: Text("第$index个"),
      ),
      child: Image.asset("assets/images/sxt.jpg", fit: BoxFit.cover),
    );
  },
)

image

GridTileBar

用在GridTile中实现AppBar样式的组件

  • Key? key:标识键
  • Color? backgroundColor:背景色
  • Widget? leading:最左边的最近
  • Widget? title:标题
  • Widget? subtitle:副标题
  • Widget? trailing:最右边的组件
Scaffold(
  body: SafeArea(
    child: GridTile(
      header: GridTileBar(
        backgroundColor: null,
        leading: const BackButton(),
        title: const Text("Favorite"),
        subtitle: const Text("最近更新:今天"),
        trailing: IconButton( icon: const Icon(Icons.share), onPressed: () {}),
      ),
      footer: ButtonBar(
        alignment: MainAxisAlignment.center,
        children: List.generate(
          5,
          (index) => Container(
            height: 12,
            width: 12,
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(index == _index ? 1 : .5),
              borderRadius: const BorderRadius.all(Radius.circular(100)),
            ),
          ),
        ),
      ),
      child: PageView.builder(
        itemCount: 5,
        onPageChanged: (index) {
          _index = index;
          setState(() {});
        },
        itemBuilder: (context, index) =>
            Image.asset("assets/images/sxt.jpg", fit: BoxFit.cover),
      ),
    ),
  ),
);

image

IgnorePointer

IgnorePointerAbsorbPointer功能一样,都能让子元素不再触发命中测试/事件。

该组件有以下几个属性:

  • Key? key:标识键
  • bool ignoring:是否会在命中测试中吸收指针。默认为true
  • Widget? child:子组件
  • bool? ignoringSemantics:编译语义树时是否忽略此渲染对象的语义

我们来看看这两个组件的区别:

Column(
  children: [
    Expanded(
      child: Stack(
        children: [
          GestureDetector(
            onTap: () {
              ScaffoldMessenger.of(context).clearSnackBars();
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("穿过了AbsorbPointer")),
              );
            },
            child: Container(color: Colors.blue),
          ),
          Align(
            alignment: Alignment.center,
            child: AbsorbPointer(
              child: ElevatedButton(
                onPressed: () {
                  ScaffoldMessenger.of(context).clearSnackBars();
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text("点击了AbsorbPointer")),
                  );
                },
                child: const Text("AbsorbPointer"),
              ),
            ),
          )
        ],
      ),
    ),
    Expanded(
      child: Stack(
        children: [
          GestureDetector(
            onTap: () {
              ScaffoldMessenger.of(context).clearSnackBars();
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("穿过了IgnorePointer")),
              );
            },
            child: Container(color: Colors.orange),
          ),
          Align(
            alignment: Alignment.center,
            child: IgnorePointer(
              child: ElevatedButton(
                onPressed: () {
                  ScaffoldMessenger.of(context).clearSnackBars();
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text("点击了IgnorePointer")),
                  );
                },
                child: const Text("IgnorePointer"),
              ),
            ),
          ),
        ],
      ),
    ),
  ],
)

image

我们可以看到,IgnorePointer会透过自身,将点击事件传递到下一层的组件,而AbsorbPointer并不会。

ImageFiltered

给图片增加滤镜。和BackdropFilter使用相比更简单。

该组件有以下几个属性:

  • Key? key:标识键
  • ImageFilter imageFilter:图片滤镜效果
  • Widget? child:子组件
ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: 50.0, sigmaY: 50.0),
  child: Image.asset("assets/images/sxt.jpg"),
),

image

本文作者:DerFeigling

本文链接:https://www.cnblogs.com/ilgnefz/p/16944130.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   菠萝橙子丶  阅读(443)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 Shining For One Thing 赵贝尔
Shining For One Thing - 赵贝尔
00:00 / 00:00
An audio error has occurred.

Shining For One Thing (《一闪一闪亮星星》影视剧歌曲) - 赵贝尔

词:萨吉

曲:金大洲

编曲:金大洲D-Jin

制作人:金大洲D-Jin

吉他/Bass:D-Jin

合声编写/合声:赵贝尔

人声录音/编辑:张德龙@D-Jin Music Studio

混音/母带处理:George Dum

宣传推广:杨慧颖/杨佩

封面设计:HOO

OP/音乐制作出品:D-Jin Music(北京翊辰文化传媒有限公司)

(未经著作权人许可,不得翻唱、翻录或使用)

夏夜的花火

夏夜的花火

因为你在身边而深刻

因为你在身边而深刻

幸运的是我

在宇宙之间听见承诺

在宇宙之间听见承诺

嗨 是我

这一次别再错过

这一次别再错过

喜欢你该由我主动了

喜欢你该由我主动了

星星那么多

星星那么多

有数不尽的浪漫闪烁

注定这一颗

会让你刻在手臂左侧

属于我

星形心率的贴合

幸有你总在守护我

幸有你总在守护我

I fall in love

I fall in love

I see your love

遇见你才发现我在

等你到来

等你到来

Fallen star

The wonder of you

我会永远在你天空

我会永远在你天空

为你闪烁 my love

为你闪烁 my love

Shining for one thing

Shining for one thing

Shining for one thing

Shining for one thing

It's you

It's you

星星那么多

星星那么多

有数不尽的浪漫闪烁

注定这一颗

会让你刻在手臂左侧

属于我

星形心率的贴合

幸有你总在守护我

幸有你总在守护我

I fall in love

I fall in love

I see your love

遇见你才发现我在

等你到来

等你到来

Fallen star

The wonder of you

我会永远在你天空

我会永远在你天空

为你闪烁 my love

为你闪烁 my love

Shining for one thing

Shining for one thing

Shining for one thing

Shining for one thing

It's you

It's you