flutter 基础组件
TextWidget
class TextWidget extends StatelessWidget {
final TextStyle _textStyle = TextStyle(
fontSize: 16.0,
);
final String _auther = '李白';
final String _title = '将进酒'; @override
Widget build(BuildContext context) {
return Text(
// 插值写法$_value
'《$_title》是唐代大诗人$_auther沿用乐府古题创作的一首诗。此诗为李白长安放还以后所作,思想内容非常深沉,艺术表现非常成熟,在同题作品中影响最大。诗人豪饮高歌,借酒消愁,抒发了忧愤深广的人生感慨。诗中交织着失望与自信、悲愤与抗争的情怀,体现出强烈的豪纵狂放的个性。',
// 对齐
textAlign: TextAlign.left,
// 字体样式
style: _textStyle,
// 文本最大行数
maxLines: ,
// 若溢出的处理办法
overflow: TextOverflow.ellipsis,
);
}
}
RichTextWidget
富文本组件 允许文本间的嵌套使用
class BasicalWidgetDemo extends StatelessWidget { @override
Widget build(BuildContext context) {
return RichText(
text: TextSpan(
// 必填
text: ' licangxuan',
style: TextStyle(
color: Colors.deepPurpleAccent,
fontSize: 36.0,
// 斜体
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w100
),
children: [
TextSpan(
text: '.net',
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.w400
)
)
]
),
);
}
}
ContainerWidget
常用的容器组件
AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child}) → Container
class ContainerWidget extends StatelessWidget { @override
Widget build(BuildContext context) {
// 自动充满父组件
return Container(
// color: Colors.grey[300],
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/2.jpg'),
alignment: Alignment.centerLeft,
fit: BoxFit.cover,
)
),
padding: EdgeInsets.all(),
child: Row(
// 主轴对齐方式
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Icon(Icons.pool, size: , color: Colors.white,),
// color: Color.fromRGBO(0, 0, 0, 0.5),
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
height: ,
width: ,
// 修饰Container的装饰效果
decoration: BoxDecoration(
// 如果用这个color修饰Container,外面的就要删掉
color: Color.fromRGBO(, , , 0.8),
// 单独为上下左右设置边框
// border: Border(
// top: BorderSide(
// color: Colors.indigoAccent[200],
// width: 3,
// style: BorderStyle.solid
// )
// ),
// 四周统一设置边框
border: Border.all(
color: Colors.indigoAccent[],
width: ,
style: BorderStyle.solid
),
// 设置圆角,统一设置
// borderRadius: BorderRadius.circular(16),
// 单独设置
// borderRadius: BorderRadius.only(
// // 左上角
// topLeft: Radius.circular(16)
// )
// 阴影效果
boxShadow: [
BoxShadow(
offset: Offset(, ),
color: Color.fromRGBO(, , , 0.8),
// 阴影模糊程度
blurRadius: 20.0,
// 阴影扩散程度
spreadRadius: -6.0
)
],
// 形状,若设置为圆形则不能设置圆角属性
shape: BoxShape.circle,
// 镜像渐变
// gradient: RadialGradient(
// colors: [
// Color.fromRGBO(25, 57, 222, 1),
// Color.fromRGBO(222, 25, 11, 1),
// ]
// ),
// 线性渐变
gradient: LinearGradient(
colors: [
Colors.pinkAccent,
Colors.redAccent,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight
)
),
)
],
),
);
}
}
flutter 基础组件的更多相关文章
- Flutter 基础组件:进度指示器
前言 Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指 ...
- Flutter 基础组件:单选框和复选框
前言 Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父 ...
- Flutter 基础组件:图片和Icon
前言 Flutter中,可以通过Image组件来加载并显示图片,Image的数据源可以是asset.文件.内存以及网络. ImageProvider 是一个抽象类,主要定义了图片数据获取的接口load ...
- Flutter 基础组件:按钮
前言 Material组件库中提供了多种按钮组件如RaisedButton.FlatButton.OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所 ...
- Flutter 基础组件:文本、字体样式
// 文本.字体样式 import 'package:flutter/material.dart'; class TextFontStyle extends StatelessWidget { // ...
- Flutter 基础组件:状态管理
前言 一个永恒的主题,"状态(State)管理",无论是在React/Vue(两者都是支持响应式编程的Web开发框架)还是Flutter中,他们讨论的问题和解决的思想都是一致的. ...
- Flutter 基础组件:Widget简介
概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...
- Flutter 基础组件:输入框和表单
前言 Material组件库中提供了输入框组件TextField和表单组件Form. 输入框TextField 接口描述 const TextField({ Key key, // 编辑框的控制器,通 ...
- Flutter基础系列之入门(一)
1.Flutter是什么? 官方介绍:Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter ...
随机推荐
- Route53 health check与 Cloudwatch alarm 没法绑定
原因 即使在控制台创建 创建的alarm会在us-east-1 不会再其他区域,目前route53 metric 在其他区域不存在. 所以使用cloudformation 创建 route53 hea ...
- webrtp官方demo运行
Google官方提供的webrtc的demo对应的网站是https://webrtc.github.io/samples/ 上面的DEMO对我这种入门的人很有用,用chrome浏览器最新的版本直接可以 ...
- leetcode-mid-sorting and searching-162. Find Peak Element
mycode 54.81% class Solution(object): def findPeakElement(self, nums): """ :type num ...
- NAACL 2019 字词表示学习分析
NAACL 2019 表示学习分析 为要找出字.词.文档等实体表示学习相关的文章. word embedding 搜索关键词 word embedding Vector of Locally-Aggr ...
- The file is inaccessible to Server.
ArcGIS Unable to Start serviceserver安装后,启动服务失败,报错信息如下:Unable to Start service. Error (Server object ...
- RandomAccessFile 文件读写中文乱码解决方案!
RandomAccessFile 读写文件时,不管文件中保存的数据编码格式是什么 使用 RandomAccessFile对象方法的 readLine() 都会将编码格式转换成 ISO-8859-1 ...
- 阶段3 1.Mybatis_08.动态SQL_02.mybatis中动态sql语句-where标签的使用
这里的userSex是实体类里面的属性名,而不是数据库内的字段名称 一个老王改成性别女,为了区分一下 增加sex字段的查询 where标签 用上where和刚才的执行效果是一样的 where标签使我们 ...
- CentOS6.5 编译安装PHP5.6(apache模块)
一.环境准备 1. 下载php源码包 # wget http://cn2.php.net/distributions/php-5.6.30.tar.gz # tar -xf php-5.6.30.ta ...
- linux使用ltrace和strace跟踪程序执行过程
yum install strace yum install ltrace 1.strace ping -c 1 www.baidu.com 2.ltrace ping -c 1 www.baid ...
- Mysql数据库存储数据时间与系统获取时间不一致
最近进行项目开发,发现存在数据库内的数据和系统查询到的数据相差8小时 发现有2种比较合适的方法 (一)修改mysql服务的区时 centos进入mysql查看/修改时区 1.输入以下命令进入mysql ...