一、Opacity 组件

Opacity 组件 : 用于修改组件透明度 ;

class Opacity extends SingleChildRenderObjectWidget {const Opacity({Key key,@required this.opacity,this.alwaysIncludeSemantics = false,Widget child,}) : assert(opacity != null && opacity >= 0.0 && opacity <= 1.0),assert(alwaysIncludeSemantics != null),super(key: key, child: child);
}

Opacity 组件用法 :

设置透明度 : 在 opacity 字段设置透明度值 , 取值范围 0 ~ 1.0 ;
设置调节透明度的组件 : child 字段设置要调整透明度的组件 ;

// 修改透明度组件
Opacity(opacity: 透明度值,child: 要调整透明度的组件,
),

代码示例 : 修改 Image 组件的透明度为 50% 透明度 ;

// 修改透明度组件 , 这里设置 50% 透明度
Opacity(opacity: 0.5,// 设置 100x100 大小的图片组件child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),
),

二、ClipRRect 组件

ClipRRect 组件 : 裁剪方形布局的组件 ;

class ClipRRect extends SingleChildRenderObjectWidget {const ClipRRect({Key key,this.borderRadius = BorderRadius.zero, // 矩形四个顶点的圆角 this.clipper,this.clipBehavior = Clip.antiAlias,Widget child, // 要裁剪的组件}) : assert(borderRadius != null || clipper != null),assert(clipBehavior != null),super(key: key, child: child);
}

ClipRRect 组件使用方法 :

设置圆角 : borderRadius 字段设置四个顶点的圆角半径 ;
设置被裁剪的组件 : child 字段设置被裁剪的组件

// 方形裁剪组件 , 将组件裁剪成方形
child: ClipRRect(// 设置裁剪圆角borderRadius: 圆角参数 ( BorderRadius 类型 ),// 被裁剪的组件child: 被裁剪的组件 ( Widget 类型 ),
),

代码示例 :

// 方形裁剪组件 , 将组件裁剪成方形
child: ClipRRect(// 设置裁剪圆角, 四个角设置半径为 10 的圆角borderRadius: BorderRadius.all(Radius.circular(10)),// 修改透明度组件 , 这里设置 50% 透明度child: Opacity(opacity: 0.5,// 设置 100x100 大小的图片组件child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),),
),

三、Padding 组件

Padding 组件 : 主要作用是设置组件的内边距 ;

class Padding extends SingleChildRenderObjectWidget {const Padding({Key key,@required this.padding,Widget child,}) : assert(padding != null),super(key: key, child: child);
}

Padding 组件用法 :

设置四个内边距 : padding 字段设置内边距 , EdgeInsetsGeometry 类型 ;
设置内边距作用的组件 : child 字段设置内边距作用的组件 , Widget 类型 ;

Padding(// 设置内边距padding: 内边距 ( EdgeInsetsGeometry 类型 ),// 内边距作用组件child: 内边距作用组件 ( Widget 类型 ),
),

代码示例 :

Padding(// 设置内边距 5padding: EdgeInsets.all(15),// 方形裁剪组件 , 将组件裁剪成方形child: ClipRRect(// 设置裁剪圆角, 四个角设置半径为 10 的圆角borderRadius: BorderRadius.all(Radius.circular(10)),// 修改透明度组件 , 这里设置 50% 透明度child: Opacity(opacity: 0.5,// 设置 100x100 大小的图片组件child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),),),
),

四、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget {@override_LayoutPageState createState() => _LayoutPageState();
}class _LayoutPageState extends State<LayoutPage> {/// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: '布局组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('布局组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},// 条目items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// 设置悬浮按钮floatingActionButton: FloatingActionButton(onPressed: (){print("悬浮按钮点击");},child: Text("悬浮按钮组件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器组件RefreshIndicator(// 显示的内容child: ListView(children: <Widget>[Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡, 下拉刷新"),// 水平方向排列的线性布局Row(children: <Widget>[// 原始图片, 用于对比Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),// 圆形裁剪组件 , 将 child 布局裁剪成圆形ClipOval(// 使用 SizedBox 组件约束布局大小child: SizedBox(width: 100,height: 100,// 使用 SizedBox 约束该 Image 组件大小child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"),),),Padding(// 设置内边距 5padding: EdgeInsets.all(15),// 方形裁剪组件 , 将组件裁剪成方形child: ClipRRect(// 设置裁剪圆角, 四个角设置半径为 10 的圆角borderRadius: BorderRadius.all(Radius.circular(10)),// 修改透明度组件 , 这里设置 50% 透明度child: Opacity(opacity: 0.5,// 设置 100x100 大小的图片组件child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),),),),],),],),),],),// 刷新时回调的方法// 列表发生下拉操作时, 回调该方法// 该回调是 Future 类型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("设置页面选项卡")],),) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符),);}/// RefreshIndicator 发生下拉操作时, 回调该方法/// 该方啊是一个异步方法 , 在方法体前添加 async 关键字Future<Null> _refreshIndicatorOnRefresh() async{// 暂停 500 ms , 使用 await 关键字实现// 在这 500 ms 之间 , 列表处于刷新状态// 500 ms 之后 , 列表变为非刷新状态await Future.delayed(Duration(milliseconds: 500));return null;}}

运行效果展示 :

五、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】Flutter 布局组件 ( Opacity 组件 | ClipRRect 组件 | Padding 组件 )相关推荐

Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper
文章目录裁剪布局 ClipRect ClipRRect ClipOval ClipPath 及 CustomClipper 参考: Flutter 裁剪类组件最全总结 5.7 剪裁(Clip) 裁 ...
开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )
文章目录 ◯.Hero 构造函数一.圆形方形组件二.创建页面 1 的组件 ( Hero 组件 1 ) 三.创建页面 2 的组件 ( Hero 组件 2 ) 四.完整代码示例五.相关资源 ◯.He ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
Flutter 入门学习（五）— Material Design风格组件
文章目录 1. 概述 2. App结构和导航组件 2.1 MaterialApp(应用组件) 2.1.1 设置主页 2.1.2 路由处理 2.1.3 自定义主题 2.2 Scaffold(脚手架组件) ...
网格布局每个网格都能放置一个组件_教你打造完美网站页面布局
此条显然很重要,但是我经常发现一些设计师会跳过这步直接使用 Photoshop CS6 而不去思考他们需要解决的问题.设计的目的在于解决问题,而这些有待解决的问题无法通过渐变或阴影效果得到解决,而是需 ...
Flutter透明度渐变动画Opacity实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章在Flutter 中实 ...
Flutter关于布局
简介:布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排列(layout)方式不同. 线性布局(Row和Column) 所谓线性布局,即指沿水平或垂直方向排列子组件.Flutter 中通过 ...
Flutter常用布局集合
容器组件(Container) 容器组件(Container)是一个组合Widget,内部有绘制Widget.定位Widget和尺寸Widget,包含一个子Widget,自身具备如alignment. ...

【Flutter】Flutter 布局组件 ( Opacity 组件 | ClipRRect 组件 | Padding 组件 )

文章目录