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

Flutter不常用组件(一)

Flutter 目前拥有400多个组件,其中常用的也就那么几个。大家学习 Flutter 一般都是看的其他人的教程,或者官网的文档教程,这些教程里用到的组件只有那些常用的,更多的组件需要我们自己去看 api 文档。这里列出一些不太常使用的组件,或许可以在你需要的时候帮助你。

AboutDialog

这是一个对话框,其中包含应用程序的图标、名称、版本号和版权,以及一个自定生成的显示应用程序使用的软件许可的按钮和界面。

要想使用AboutDialog我们只需调用showAboutDialog方法就行:

Scaffold(
  appBar: AppBar(title: const Text("AboutDialog")),
  body: Center(
    child: ElevatedButton(
      onPressed: () {
        showAboutDialog(context: context);
      },
      child: const Text("显示AboutDialog"),
    ),
  ),
);

image

showAboutDialog一共有以下几个参数:

  • BuildContext context:BuildContext 对象
  • String? applicationName:程序名称
  • String? applicationVersion:程序版本
  • Widget? applicationIcon:程序图标
  • String? applicationLegalese:程序版权声明
  • List<Widget>? children:子组件
  • bool useRootNavigator = true:是否使用根导航
  • RouteSettings? routeSettings:路由设置
  • Offset? anchorPoint:锚点位置
showAboutDialog(
  context: context,
  applicationName: "Flutter冷门组件",
  applicationVersion: "0.0.1",
  applicationIcon: const FlutterLogo(),
  applicationLegalese: "没有版权声明",
  children: [
    Container(height: 12, color: Colors.blue),
    Container(height: 12, color: Colors.red),
    Container(height: 12, color: Colors.green),
  ],
  useRootNavigator: true,
  routeSettings: null,
  anchorPoint: Offset.zero,
);

image

当我们点击VIEW LICENSES按钮时,会自动跳转到系统生成的软件许可证界面,里面列出了程序所使用的的所有包的证书:

image

AboutListTile

适合用在Drawer中显示AboutDialog的组件。

该组件的使用很简单,直接使用不用传参就有效果:

return Scaffold(
    body: SafeArea(
        child: AboutListTile(),
    ),
);

image

不仅有效果,还有附带点击事件:

image

该组件有以下几个属性,大部分是设置AboutDialog

  • Key? key:标识键
  • Widget? icon:左边显示的图标
  • Widget? child:子组件
  • String? applicationName:程序名称
  • String? applicationVersion:程序版本号
  • Widget? applicationIcon:程序图标
  • String? applicationLegalese:程序版权声明
  • List<Widget>? aboutBoxChildren:弹窗显示的子组件
  • bool? dense:是否是垂直密集列表的一部分

我们使用以上几个属性看一下:

return Scaffold(
  body: SafeArea(
    child: AboutListTile(
      icon: const Icon(Icons.perm_device_info),
      applicationName: "Flutter冷门组件",
      applicationVersion: "0.0.1",
      applicationIcon: const FlutterLogo(),
      applicationLegalese: "没有版权声明",
      aboutBoxChildren: [
        Container(height: 12, color: Colors.blue),
        Container(height: 12, color: Colors.red),
        Container(height: 12, color: Colors.green),
      ],
      dense: false,
      child: const Text("这是一个AboutListTitle"),
    ),
  ),
);

image

再贴一个dense不同值得情况下的对比:

image

当然,你也可以直接使用LicensePage这个组件。

AbsorbPointer

使子组件不再触发命中测试/事件。

该组件有以下几个属性:

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

我有以下一个组件:

Center(
  child: InkWell(
    onTap: () {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("点击了")),
      );
    },
    child: Container(width: 250, height: 250, color: Colors.blue),
  ),
)

每次点击时都会弹出一个 SnackBar:

image

现在在外面套个AbsorbPointer

AbsorbPointer(
  child: Center(
    child: InkWell(
      onTap: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("点击了")),
        );
      },
      child: Container(width: 250, height: 250, color: Colors.blue),
    ),
  ),
)

image

若想重新使子组件能接受点击事件,只要把absorbing属性设置为false就行。

Accumulator

整数的可变包装器,可以通过引用传递来在递归堆栈中跟踪值。

准确来说这不是组件,就是 Flutter 中的一个类。它只有一个int类型的属性value,默认值是0。有两个比较重要的实例方法:valueincrement

下面通过一个简单的例子来使用以下:

// 先实例化一下
Accumulator accumulator = Accumulator();
Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("${accumulator.value}", style: const TextStyle(fontSize: 24)),
      ElevatedButton(
        onPressed: () {
          accumulator.increment(5);
          setState(() {});
        },
        child: const Text("+5"),
      ),
    ],
  ),
)

image

AnnotatedRegion

在某个页面中单独修改状态栏和导航栏主题

  • Key? key:标识键
  • Widget child:子组件
  • SystemUiOverlayStyle value`:SystemUiOverlayStyle属性
  • bool sized:推入树中的层是否提供大小。默认为true
 AnnotatedRegion(
    value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
    ),
    child: Scaffold(
       // ...
    )
  )

image

有两点需要注意:

  • 该组件最好是在没有使用官方AppBar时使用,因为AppBarsystemOverlayStyle属性会覆盖状态栏的样式(AppBarsystemOverlayStyle无法修改系统导航栏的样式)。当然,可以两个混合使用:

    AnnotatedRegion(
          value: SystemUiOverlayStyle(
            systemNavigationBarColor: _colors[_index],
            systemNavigationBarIconBrightness: _flag ? Brightness.light : Brightness.dark,
          ),
          child: Scaffold(
            appBar: AppBar(
              title: Text(
                "AnnotatedRegion",
                style: TextStyle(color: _flag ? Colors.white : Colors.black),
              ),
              leading: BackButton(color: _flag ? Colors.white : Colors.black),
              backgroundColor: _colors[_index],
              systemOverlayStyle: SystemUiOverlayStyle(
                statusBarColor: _colors[_index],
                statusBarIconBrightness: _flag ? Brightness.light : Brightness.dark,
              ),
            ),
            body: ...
          ),
        )
    

image

  • 使用该组件修改的样式会运用到全局,最好的方法是在返回或进入的另一个界面也对SystemUiOverlayStyle进行设置

ButtonBar

用来对齐一系列按钮

  • Key? key:标识键
  • MainAxisAlignment? alignment:主轴对齐方式。默认为MainAxisAlignment.end
  • MainAxisSize? mainAxisSize:水平空间的宽度。默认为MainAxisSize.max
  • ButtonTextTheme? buttonTextTheme:按钮文本主题
  • double? buttonMinWidth:按钮最小宽度
  • double? buttonHeight:按钮高度
  • EdgeInsetsGeometry? buttonPadding:按钮内边距
  • bool? buttonAlignedDropdown:定义DropdownButton菜单的宽度是否与按钮的宽度匹配。默认值为 false
  • ButtonBarLayoutBehavior? layoutBehavior:定义ButtonBar是否应使用最小尺寸约束或填充来调整自身大小。默认值为 ButtonBarLayoutBehavior.padded
  • VerticalDirection? overflowDirection:定义子项(如果溢出)的垂直方向。默认为VerticalDirection.down
  • double? overflowButtonSpacing:按钮栏溢出时按钮之间的间距
  • List children = const []:子按钮
Center(
  child: ButtonBar(
    mainAxisSize: MainAxisSize.max,
    alignment: MainAxisAlignment.center,
    buttonPadding: const EdgeInsets.symmetric(horizontal: 12),
    overflowDirection: VerticalDirection.up,
    children: [
      const BackButton(),
      const CloseButton(),
      DropdownButton(
        value: "语文",
        items: const [
          DropdownMenuItem(value: "语文", child: Text("语文")),
          DropdownMenuItem(value: "数学", child: Text("数学")),
          DropdownMenuItem(value: "英语", child: Text("英语")),
        ],
        onChanged: (value) {},
      ),
      TextButton(onPressed: () {}, child: const Text("按钮")),
      ElevatedButton(onPressed: () {}, child: const Text("按钮")),
      OutlinedButton(onPressed: () {}, child: const Text("按钮")),
      MaterialButton(onPressed: () {}, child: const Text("按钮")),
    ],
  ),
),

image

这样看起来这个组件是不是很鸡肋。其实这种用法是错误的,官方推荐在弹窗中使用该组件:

TextButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: const Text("弹窗"),
          children: [
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text("ButtonBar的使用"),
            ),
            ButtonBar(
              children: [
                OutlinedButton(onPressed: () {}, child: const Text("确认")),
                OutlinedButton(onPressed: () {}, child: const Text("取消")),
              ],
            ),
          ],
        );
      },
    );
  },
  child: const Text("按钮"),
)

image

BackdropFilter

对子元素应用滤镜。

  • Key? key:标识键
  • ImageFilter filter:在绘制子项之前应用于现有绘制内容的图像过滤器
  • Widget? child:子组件
  • BlendMode blendMode:用于将过滤的背景内容应用到背景表面的混合模式。默认值为BlendMode.srcOver
Stack(
  children: [
    Image.asset("assets/images/sxt.jpg", fit: BoxFit.cover),
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
      child: ColoredBox(color: Colors.white.withOpacity(.2)),
    ),
  ],
),

image

本文作者:菠萝橙子丶

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

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

posted @   菠萝橙子丶  阅读(458)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  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