利用Flutter轻松制作红包界面

更新时间：2022年11月15日 08:22:39 作者：岛上码农

这篇文章主要为大家详细介绍了如何利用Flutter实现轻松制作一个红包界面，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以了解一下

前言

在 Flutter 的开发中，最常见的就是层层的组件嵌套，因此不可避免会遇到子组件如何适配父组件的问题。比如，按钮的可点击区域是否要占满整个父组件？图片是居中还是居左？这些问题可以通过 Flutter 提供的FittedBox 组件来解决。

FittedBox 简介

FittedBox 组件设计的目的就是让其子组件与父级组件进行适配，包括对齐、缩放、裁剪和溢出处理。

const FittedBox({
  Key? key,
  this.fit = BoxFit.contain,
  this.alignment = Alignment.center,
  this.clipBehavior = Clip.none,
  Widget? child,
})

如上所示，FittedBox 的定义很简洁，只有下面四个属性：

fit：子组件和父组件的适配模式，BoxFit 枚举，包括了不处理（none）、尽量包含（contain），拉伸填满（fill），宽度方向填满（fitWidth），高度方向填满（fitHeight）和缩小到父组件内（scaleDown)，具体适配的样式可以看官方的文档不同 BoxFit 样式。
alignment：子组件与父组件的对齐方式，包括居中（center）、左侧居中(centerLeft)、右侧居中(centerRight)，顶部居中（topCenter）、底部居中（bottomCenter）等。
clipBehavior：超出后的裁剪模式，即子组件溢出父组件后要不要裁剪，不裁剪的话子组件可能会超出父组件的显示范围。
child：要适配的子组件。

使用示例

我们来看一张图片在不同适配参数下的效果，这里我们可以在底部切换不同的适配模式，注意这里我们使用了裁剪来防止溢出，clipBehavior参数为 Clip.antiAlias。可以看到图片随着不同的模式显示的区域、对齐也会不同，这就给我们提供了子组件适配很大的灵活性。

上面的示例代码如下。

var _fit = BoxFit.none;
var _alignment = Alignment.center;
@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    appBar: AppBar(
        title: const Text('FittedBox'), backgroundColor: Colors.red[400]!),
    body: Center(
      child: Container(
        width: MediaQuery.of(context).size.width - 30.0,
        height: 160.0,
        color: Colors.blue,
        child: FittedBox(
          alignment: _alignment,
          fit: _fit,
          clipBehavior: Clip.antiAlias,
          child: Image.asset('images/girl.jpeg'),
        ),
      ),
    ),
    bottomSheet: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        DropdownButton(
          items: const [
            DropdownMenuItem<BoxFit>(
              value: BoxFit.none,
              child: Text('BoxFit.none'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.contain,
              child: Text('BoxFit.contain'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.fill,
              child: Text('BoxFit.fill'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.cover,
              child: Text('BoxFit.cover'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.fitHeight,
              child: Text('BoxFit.fitHeight'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.fitWidth,
              child: Text('BoxFit.fitWidth'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.scaleDown,
              child: Text('BoxFit.scaleDown'),
            ),
          ],
          value: _fit,
          onChanged: (fit) {
            setState(() {
              _fit = fit as BoxFit;
            });
          },
        ),
        DropdownButton(
          items: const [
            DropdownMenuItem<Alignment>(
              value: Alignment.center,
              child: Text('Alignment.center'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.centerLeft,
              child: Text('Alignment.centerLeft'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.centerRight,
              child: Text('Alignment.centerRight'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.topCenter,
              child: Text('Alignment.topCenter'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.bottomCenter,
              child: Text('Alignment.bottomCenter'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.topLeft,
              child: Text('Alignment.topLeft'),
            ),
          ],
          value: _alignment,
          alignment: AlignmentDirectional.center,
          onChanged: (alignment) {
            setState(() {
              _alignment = alignment as Alignment;
            });
          },
        ),
      ],
    ),
  );
}

红包界面

下面我们来用 FittedBox 做一个红包界面效果，如下图所示。

这里红包顶部的深色部分其实就是用 FittedBox 将一个 Container 贴在了顶部居中位置。具体实现代码如下所示。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    appBar: AppBar(
        title: const Text('FittedBox'), backgroundColor: Colors.red[400]!),
    body: Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 240.0,
            height: 400.0,
            color: Colors.red,
            child: FittedBox(
              alignment: Alignment.topCenter,
              fit: BoxFit.fitWidth,
              clipBehavior: Clip.antiAlias,
              child: Container(
                height: 50.0,
                width: 160.0,
                decoration: BoxDecoration(
                  borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(160.0),
                      bottomRight: Radius.circular(160.0)),
                  color: Colors.red[800],
                ),
              ),
            ),
          ),
          ClipOval(
            child: Container(
              width: 80,
              height: 80,
              alignment: Alignment.center,
              color: Colors.yellow[700],
              child: const Text(
                '開',
                style: TextStyle(
                  fontSize: 42.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

总结

本篇介绍了 Flutter 中的布局组件 FittedBox 的使用。FittedBox 是一个非常简单、但实用的组件，通过它，我们可以将子组件按一定的方式适配到父组件实现所需要的布局，从而简化开发中的布局样式的代码编写。

到此这篇关于利用Flutter轻松制作红包界面的文章就介绍到这了,更多相关Flutter红包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用Android系统提供的DownloadManager来下载文件
本篇文章主要介绍了使用Android系统提供的DownloadManager来下载文件，可以将长时间的下载任务交给系统，完全由系统管理，有需要的可以了解下。
2016-11-11
Android中获取sha1证书指纹数据的方法
大家都知道在Android开发中，经常要获取sha1证书指纹，所以这篇文章主要介绍在Android中如何使用命令获取sha1证书指纹数据的方法，有需要的可以参考借鉴。
2016-09-09
Android使用jni调用c++/c方法详解
这篇文章主要介绍了Android使用jni调用c++/c方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Android实现多媒体录音笔
这篇文章主要介绍了Android实现多媒体录音笔的相关资料，以及在实现过程中遇到问题的解决方法，感兴趣的小伙伴们可以参考一下
2016-01-01
Android FileProvider使用教程
主要摘要关键知识点和记录我的学习思路及验证结论，可以帮助读者比较全面的认识FileProvider，FileProvider是特殊的ContentProvider，目标是在为保护隐私和数据安全而加强应用沙箱机制的同时，支持在应用间共享文件
2023-03-03
Android Studio搜索功能(查找功能)及快捷键图文详解
这篇文章主要介绍了Android Studio搜索功能(查找功能)及快捷键图文详解，本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下
2017-12-12
Android 中添加水平线和垂直线方法总结
这篇文章主要介绍了Android 中添加水平线和垂直线方法总结的相关资料,需要的朋友可以参考下
2017-02-02
Android BottomNavigationBar底部导航的使用方法
这篇文章主要为大家详细介绍了Android BottomNavigationBar底部导航的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
Android listView 绘制表格实例详解
这篇文章主要介绍了Android listView 绘制表格实例详解的相关资料,这里附有实例代码及实现效果图，利用listView 绘制表格提供实现思路，需要的朋友可以参考下
2017-01-01
Android中Activity的四种启动模式和onNewIntent()
android 中activity的启动模式分为四种，（standard、singleTop、singTask、singleInstance），本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-08-08

利用Flutter轻松制作红包界面

目录

前言

FittedBox 简介

使用示例

红包界面

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具