flutter 容器Padding、DecoratedBox、Transform、RotatedBox、Container、Clip、FittedBox、Scaffold

2023-10-12 15:50
文章标签 容器 flutter clip padding container transform decoratedbox rotatedbox fittedbox scaffold

本文主要是介绍flutter 容器Padding、DecoratedBox、Transform、RotatedBox、Container、Clip、FittedBox、Scaffold，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.Padding给其子节点添加边距类似于Android Layout布局里面的padding属性。

 	Padding(padding: EdgeInsets.all(20),child: Text('padding1',style: TextStyle(fontSize: 20,color: Colors.red),),),Padding(padding: EdgeInsets.all(5),child: Text('padding2',style: TextStyle(fontSize: 20,color: Colors.blueAccent),),),Padding(padding: EdgeInsets.only(left: 100,top: 100),child: Text('padding3',style: TextStyle(fontSize: 20,color: Colors.purple),),)

在这里插入图片描述

2.DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。

  DecoratedBox(//设置装饰位置（DecorationPosition.foreground）前景，（DecorationPosition.background）背景position: DecorationPosition.background,//设置装饰decoration: BoxDecoration(//单色color: Colors.red,//颜色渐变gradient: LinearGradient(colors: [Colors.red, Colors.orange.shade700]),//图片image: const DecorationImage(image: NetworkImage('https://tse1.mm.bing.net/th/id/OET.1ffb291d38a046a6921fd6559c91b06d?w=272&h=135&c=7&rs=1&o=5&dpr=2&pid=1.9')),// //背景混合模式// backgroundBlendMode:BlendMode.dstOut,//边框// border: Border(left:BorderSide(color:Colors.teal,width: 10) ),border: Border.all(color: Colors.teal, width: 5),//圆角borderRadius: BorderRadius.circular(10),//阴影boxShadow: const [BoxShadow(color: Colors.black54,offset: Offset(10.0, 10.0),blurRadius: 4.0)],//装饰形状，如果是BoxShape.circle就不能设置圆角borderRadius参数shape: BoxShape.rectangle),child: const Padding(padding: EdgeInsets.all(40),child: Text('DecoratedBox',style: TextStyle(color: Colors.yellow, fontSize: 40),),),)

在这里插入图片描述

3.Transform子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作

  Container(color: Colors.red,child: Transform(alignment: Alignment.centerRight,transform: Matrix4.skewY(0.2),child: const Text('Transform倾斜',style: TextStyle(fontSize: 40),),),),const SizedBox(height: 40,),Transform.rotate(angle: 0.3,child: const Text('Transform旋转',style: TextStyle(fontSize: 20),)),const SizedBox(height: 40,),Container(color: Colors.blueAccent,child: Transform.translate(offset: const Offset(10, 10),child: const Text('Transform平移',style: TextStyle(fontSize: 20),),),),const SizedBox(height: 40,),Container(color: Colors.yellow,child: Transform.scale(scale: 0.7,child: const Text('Transform缩放',style: TextStyle(fontSize: 20),),),)

在这里插入图片描述

4.Container可以定制装饰子控件的容器背景，边距，间距，渐变，阴影…

Container(margin:  EdgeInsets.only(top: 10.0, left: 40.0),constraints: BoxConstraints.tightFor(width: 100.0, height: 100.0),//卡片大小decoration: BoxDecoration(  //背景装饰gradient: RadialGradient( //背景径向渐变colors: [Colors.lightGreenAccent, Colors.yellow],center: Alignment.topLeft,radius: .98,),boxShadow: [//卡片阴影BoxShadow(color: Colors.black54,offset: Offset(2.0, 2.0),blurRadius: 4.0,)],//圆角borderRadius: BorderRadius.all(Radius.circular(4.0),)),transform: Matrix4.rotationZ(.1),//卡片倾斜变换alignment: Alignment.center, //卡片内文字居中child: Text(//卡片文字"8899", style: TextStyle(color: Colors.white, fontSize: 40.0),),)

在这里插入图片描述

5.Clip裁剪子控件

  • ClipOval 子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆
  • ClipRRect 将子组件剪裁为圆角矩形
  • ClipRect 默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁）
  • ClipPath 按照自定义的路径剪裁
class _ClipWidget extends StatelessWidget {final Image photo = Image.network('https://tse1.mm.bing.net/th/id/OET.5272002b31e349ca8b7f061d2d17466f?w=135&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9',height: 100,width: 100,fit: BoxFit.cover,);@overrideWidget build(BuildContext context) => MaterialApp(home: Scaffold(body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [photo,const SizedBox(height: 20,),ClipOval(child: photo,),const SizedBox(height: 20,),ClipRRect(child: photo,borderRadius: const BorderRadius.all(Radius.circular(20)),),const SizedBox(height: 20,),Container(color: Colors.yellow,width: 120,child: Row(children: [Align(alignment: Alignment.centerRight,widthFactor: .5,child: ClipRect(child: photo,),),const Text('我是文本')],),),],),),),);
}

在这里插入图片描述

6.FittedBox对其子控件缩放布局

const FittedBox({Key? key,this.fit = BoxFit.contain, // 适配方式this.alignment = Alignment.center, //对齐方式this.clipBehavior = Clip.none, //是否剪裁Widget? child,
})
  • BoxFit.none ：不做任何填充
  • BoxFit.fill：不按宽高比例填充，内容不会超过容器范围
  • BoxFit.contain：按照宽高比等比模式填充，内容不会超过容器范围
  • BoxFit.cover：按照原始尺寸填充整个容器模式。内容可能回超过容器范围
  • BoxFit.scaleDown：会根据情况缩小范围
class _FittedBoxWidget extends StatelessWidget {@overrideWidget build(BuildContext context) => MaterialApp(home: Scaffold(body: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Container(color: Colors.teal,width: 200,height: 60,child: FittedBox(fit: BoxFit.none,child: Padding(padding: const EdgeInsets.symmetric(vertical: 30.0),child: Row(children: [Text('BoxFit.none,' * 10)]), //文本长度超出 Row 的最大宽度会溢出),),),Container(width: 200,color: Colors.lightGreenAccent,height: 60,child: FittedBox(fit: BoxFit.fill,alignment: Alignment.topLeft,child: Padding(padding: const EdgeInsets.symmetric(vertical: 30.0),child: Row(children: const [Text('BoxFit.fill,')]), //文本长度超出 Row 的最大宽度会溢出),),),Container(width: 200,color: Colors.yellow,height: 60,child: FittedBox(fit: BoxFit.contain,alignment: Alignment.topLeft,child: Padding(padding: const EdgeInsets.symmetric(vertical: 30.0),child: Row(children: const [Text('BoxFit.contain,')]), //文本长度超出 Row 的最大宽度会溢出),),),Container(width: 200,color: Colors.red,height: 60,child: FittedBox(fit: BoxFit.cover,alignment: Alignment.topLeft,child: Padding(padding: const EdgeInsets.symmetric(vertical: 30.0),child: Row(children: const [Text('BoxFit.cover,')]), //文本长度超出 Row 的最大宽度会溢出),),),const SizedBox(height: 100,),Container(width: 200,color: Colors.blue,height: 60,child: FittedBox(fit: BoxFit.scaleDown,alignment: Alignment.topLeft,child: Padding(padding: const EdgeInsets.symmetric(vertical: 30.0),child: Row(children: const [Text('BoxFit.scaleDown,BoxFit.scaleDown,BoxFit.scaleDown,BoxFit.scaleDown,')]), //文本长度超出 Row 的最大宽度会溢出),),),],),),);
}

在这里插入图片描述

7.Scaffold支持页面标题，侧边栏，底部导航，浮动按钮…

class _ScaffoldWidget extends StatelessWidget {@overrideWidget build(BuildContext context) => MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('头部标题'),centerTitle: true,),body: const Text("body"),floatingActionButton: ElevatedButton(child: const Text('我是浮动按钮'),onPressed: () {},),drawer: Drawer(child: Container(alignment: Alignment.center,child: const Text('这个是侧边栏'),color: Colors.blue,),),bottomNavigationBar: BottomNavigationBar(type: BottomNavigationBarType.fixed,items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: '首页',backgroundColor: Colors.blue),BottomNavigationBarItem(icon: Icon(Icons.category), label: '分类'),BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: '购物车'),BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的')],)),);
}

在这里插入图片描述

这篇关于flutter 容器Padding、DecoratedBox、Transform、RotatedBox、Container、Clip、FittedBox、Scaffold的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/196882。

相关文章

K8S（Kubernetes）开源的容器编排平台安装步骤详解

K8S（Kubernetes）开源的容器编排平台安装步骤详解

K8S（Kubernetes）是一个开源的容器编排平台，用于自动化部署、扩展和管理容器化应用程序。以下是K8S容器编排平台的安装步骤、使用方式及特点的概述： 安装步骤： 安装Docker：K8S需要基于Docker来运行容器化应用程序。首先要在所有节点上安装Docker引擎。 安装Kubernetes Master：在集群中选择一台主机作为Master节点，安装K8S的控制平面组件，如AP
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
容器编排平台Kubernetes简介

容器编排平台Kubernetes简介

目录 什么是K8s 为什么需要K8s 什么是容器(Contianer) K8s能做什么？ K8s的架构原理  控制平面(Control plane)         kube-apiserver         etcd         kube-scheduler         kube-controller-manager         cloud-controlle
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
C++ STL关联容器Set与集合论入门

C++ STL关联容器Set与集合论入门

1. 简介 Set（集合）属于关联式容器，也是STL中最实用的容器，关联式容器依据特定的排序准则，自动为其元素排序。Set集合的底层使用一颗红黑树，其属于一种非线性的数据结构，每一次插入数据都会自动进行排序，注意，不是需要排序时再排序，而是每一次插入数据的时候其都会自动进行排序。因此，Set中的元素总是顺序的。 Set的性质有：数据自动进行排序且数据唯一，是一种集合元素，允许进行数学上的集合相
阅读更多...
Spring容器上下文

Spring容器上下文

目录 一 什么是spring容器上下文 二 spring容器上下文可以做什么 三 如何使用 1.实现ApplicationContextAware接口 2.代码测试 一 什么是spring容器上下文 你可以把它理解成就是spring容器，它主要用于管理Bean对象，包括bean的生命周期，bean的注入等等。 二 spring容器上下文可以做什么 我们刚刚上面
阅读更多...
Java 入门指南：Java 并发编程 —— 并发容器 ConcurrentLinkedDeque

Java 入门指南：Java 并发编程 —— 并发容器 ConcurrentLinkedDeque

文章目录 ConcurrentLinkedDeque特点构造方法常用方法使用示例注意事项 ConcurrentLinkedDeque ConcurrentLinkedDeque 是 Java 并发工具包（java.util.concurrent 包）中的一个线程安全的双端队列（Deque）实现，实现了 Deque 接口。它使用了链表结构，并且针对高并发环境进行了优化，非常适合
阅读更多...
Docker 容器技术：简化 MySQL 主从复制部署与优化

Docker 容器技术：简化 MySQL 主从复制部署与优化

Docker 容器技术：简化 MySQL 主从复制部署与优化 引言 随着大数据和云计算的快速发展，数据库的高可用性、可扩展性和易维护性成为了企业IT架构中的重要考量因素。MySQL 作为一款流行的开源数据库管理系统，其主从复制（Master-Slave Replication）功能为实现数据备份、故障恢复、读取扩展和数据分析提供了强有力的支持。然而，传统的 MySQL 主从复制部署过程复杂且容
阅读更多...
flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题 GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。 最近通过flutter build web，通过发布到GitHu
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2