Flutter 四:基础部件
2024-05-20 09:55:41
文章目录
- 1.Text：文字与文字样式
- 2.RichText：行内多样式的文字
- 3.Container：容器
- 4.BoxDecoration：装饰盒子
- 5.BoxDecoration：边框（border）
- 6.圆角效果
- 7.BoxDecoration：阴影（borderShadow）
- 8.BoxDecoration：形状（shape）
- 9. BoxDecoration：渐变（gradient）
- 10.BoxDecoration：背景图像（image）
- 完整dart
1.Text：文字与文字样式
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{final TextStyle _textStyle=TextStyle(fontSize:16.0,);final String _author='李白';final String _title='将进酒';@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Text('《$_title》——$_author。君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。',textAlign: TextAlign.left,//对齐方式style: _textStyle,//文字样式maxLines: 3,//最多三行overflow: TextOverflow.ellipsis,//多出来的用省略号代替);}
}
2.RichText：行内多样式的文字
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn RichText(text: TextSpan(text:'ninghao',style:TextStyle(color: Colors.deepPurpleAccent,fontSize: 34.0,fontStyle: FontStyle.italic,fontWeight: FontWeight.w100,),children: [//子部件，其他样式TextSpan(text: '.net',style: TextStyle(fontSize:17.0,color:Colors.grey,),)]));}
}
3.Container：容器
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(//容器color:Colors.grey[100],child:Row(//Row小部件可以放一些水平放置的部件children:<Widget>[Container(child:Icon(Icons.pool,size:32.0,color:Colors.white),color: Color.fromRGBO(3, 54, 255, 1.0),padding: EdgeInsets.all(16.0),//内边距margin: EdgeInsets.all(8.0),//外边距width:90.0,height: 90.0,)]));}
}
4.BoxDecoration：装饰盒子
出现这个错，是因为重复添加了color
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(//容器color:Colors.grey[100],child:Row(//Row小部件可以放一些水平放置的部件mainAxisAlignment: MainAxisAlignment.center,//主轴对齐，居中children:<Widget>[Container(child:Icon(Icons.pool,size:32.0,color:Colors.white),//color: Color.fromRGBO(3, 54, 255, 1.0),padding: EdgeInsets.all(16.0),//内边距margin: EdgeInsets.all(8.0),//外边距width:90.0,height: 90.0,decoration: BoxDecoration(//装饰盒子color:Color.fromRGBO(3, 54, 255, 1.0),),)]));}
}
5.BoxDecoration：边框（border）
上下添加边框：
decoration: BoxDecoration(//装饰盒子color:Color.fromRGBO(3, 54, 255, 1.0),border: Border(top:BorderSide(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),bottom:BorderSide(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),)),
周围都添加边框：
border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),
6.圆角效果
borderRadius: BorderRadius.circular(16.0),//圆角效果,圆形的盒子不能有圆角效果
单独设置：
borderRadius: BorderRadius.only(topLeft:Radius.circular(64.0),//左上角bottomLeft:Radius.circular(64.0),//左下角)//圆角效果,圆形的盒子不能有圆角效果
decoration: BoxDecoration(//装饰盒子color:Color.fromRGBO(3, 54, 255, 1.0),border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),//边框效果borderRadius: BorderRadius.only(topLeft:Radius.circular(64.0),//左上角bottomLeft:Radius.circular(64.0),//左下角)//圆角效果),
7.BoxDecoration：阴影（borderShadow）
boxShadow: [BoxShadow(offset:Offset(0.0,7.0),//阴影偏移,x,ycolor: Color.fromRGBO(16,20, 188, 1.0),//颜色，默认黑色blurRadius: 20.0,//值越大，模糊程度越明显spreadRadius: -3.0,//控制阴影的扩撒程度，为正就会扩大，为负就会缩小), ]
8.BoxDecoration：形状（shape）
圆角效果,圆形的盒子不能有圆角效果
shape: BoxShape.circle,
9. BoxDecoration：渐变（gradient）
gradient: RadialGradient(//镜像渐变colors: [Color.fromRGBO(7, 102, 255, 1.0),Color.fromRGBO(3, 28, 128, 1.0),],),
gradient: LinearGradient(//RadialGradient镜像渐变,LinearGradient线性渐变，默认从左到右colors: [Color.fromRGBO(7, 102, 255, 1.0),Color.fromRGBO(3, 28, 128, 1.0),],begin: Alignment.topCenter,//可设置渐变方向end: Alignment.bottomCenter,),
10.BoxDecoration：背景图像（image）
decoration: BoxDecoration(//设置背景图片image:DecorationImage(image:NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),alignment:Alignment.topCenter,//repeat: ImageRepeat.repeatY,//延Y轴重复fit:BoxFit.cover,//填充方式，填满colorFilter:ColorFilter.mode(//加滤镜Colors.indigoAccent[400].withOpacity(0.5),BlendMode.hardLight,),)),
完整dart
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(//容器//color:Colors.grey[100],decoration: BoxDecoration(//设置背景图片image:DecorationImage(image:NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),alignment:Alignment.topCenter,//repeat: ImageRepeat.repeatY,//延Y轴重复fit:BoxFit.cover,//填充方式，填满colorFilter:ColorFilter.mode(//加滤镜Colors.indigoAccent[400].withOpacity(0.5),BlendMode.hardLight,),)),child:Row(//Row小部件可以放一些水平放置的部件mainAxisAlignment: MainAxisAlignment.center,//主轴对齐，居中children:<Widget>[Container(child:Icon(Icons.pool,size:32.0,color:Colors.white),//color: Color.fromRGBO(3, 54, 255, 1.0),padding: EdgeInsets.all(16.0),//内边距margin: EdgeInsets.all(8.0),//外边距width:90.0,height: 90.0,decoration: BoxDecoration(//装饰盒子color:Color.fromRGBO(3, 54, 255, 1.0),border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),//边框效果//borderRadius: BorderRadius.circular(16.0),//圆角效果,圆形的盒子不能有圆角效果boxShadow: [BoxShadow(offset:Offset(0.0,7.0),//阴影偏移,x,ycolor: Color.fromRGBO(16,20, 188, 1.0),//颜色，默认黑色blurRadius: 20.0,//值越大，模糊程度越明显spreadRadius: -3.0,//控制阴影的扩撒程度，为正就会扩大，为负就会缩小), ],shape: BoxShape.circle,gradient: LinearGradient(//RadialGradient镜像渐变,LinearGradient线性渐变，默认从左到右colors: [Color.fromRGBO(7, 102, 255, 1.0),Color.fromRGBO(3, 28, 128, 1.0),],begin: Alignment.topCenter,//可设置渐变方向end: Alignment.bottomCenter,),),)]));}
}
Flutter 四:基础部件相关推荐
- Flutter (四) 基础 Widgets、Material Components Widget 全面介绍
基础 Widgets 重要概念 一切皆组件.Flutter 所有的元素都是由组件组成.比如一个布局元素.一个动画.一个装饰效果等. 容器 Container 容器组件 Container 包含一个子 ...
- Flutter(四)——基础组件
本文目录 前言 基础组件 Text 常用属性使用 Icon Image Button FlutterLogo 前言 你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLa ...
- Flutter学习之Dart语法特性
一.前言 第一天把Flutter环境搭建了,并简单实现第运行第一个Flutter项目,感觉很不错,一些基本操作和原生体验差不多.用Flutter框架写过App项目的开发者都知道,Flutter是一个使 ...
- Flutter 学习
Flutter 学习 参照:https://book.flutterchina.club/ 参照:https://flutter.cn/docs/development/platform-integr ...
- 移动开发还有未来吗？
作者 | 曹立成 本文经授权转自InterestDriven(ID:hello123android) 我是一名 Android 开发者.从2017年下半年开始,就开始听到各种言论,例如 "A ...
- 2019年Android开发的未来发展方向该如何走？
作为一名资深的Android 开发者.从2017年下半年开始,就听到各种言论,例如"Android 开发凉凉"."移动端开发没出路了赶紧转行"."要被 ...
- 写给新手Android程序员的一封信
"当你不创造东西时,你只会根据自己的感觉而不是能力去看待问题." 欢迎来到程序员的世界.在这个世界上,不是有很多人想创造软件并解决问题. 对于下面的文字你不必完全接受,所有这些来自 ...
- 股市大跌对于IT行业的我们应该如何应对！2020年Android开发的未来发展方向该如何走？
作者:Android架构 原文链接:https://zhuanlan.zhihu.com/p/64736562 最近这几天基金股市一片绿油油,心拔凉拔凉的.虽然我是一名Android开发者,但是更是一 ...
- Flutter 动画全解析（动画四要素、动画组件、隐式动画组件原理等）
本文通过拆解 Flutter 中动画的实现方式以及原理来介绍动画实现的整个过程. 1. 动画四要素 动画在各个平台的实现原理都基本相同,是在一段时间内一系列连续变化画面的帧构成的.在 Flutter ...
最新文章
- js 关于运算顺序的问题
- winsever 2008 r2 管理员账号没有权限_钉钉管理员攻略—主管理员①
- wxWidgets：wxImage类用法
- Flash 与 Js 相互调用
- 操作系统——内存管理——分段和分页
- 存算分离架构的高斯Redis，用强一致提供可靠保障
- android tv 帮助,android TV端各类焦点问题
- php core模块,module.php
- stretchblt 模糊_拼多多直播不显示画面？直播画面模糊怎么调整
- 计算机教师自检自查报告,信息技术教学工作自查报告
- MATLAB Simulink 中的过零检测与代数环
- 免费解析成pdf下载 -原创力文档
- axure手机页面设计说明_产品经理原型演示——Axure制作手机登陆界面
- 移动光猫怎么设置虚拟服务器设置,移动光纤猫如何设置,怎样连接和设置光猫和路由器...
- 十一.TensorFlow之可视化好帮手B
- 境界--------相濡以沫，不如相忘于江湖
- 4点策略教你如何做好社群营销
- CI130X智能语音芯片应用于空气炸锅，可实现离线语音控制空气炸锅，高抗噪高识别率
- pixel-wise，patch-wise，image-wise的含义
- 手机上所部署的DigiCert证书过期怎么办