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 基础组件的更多相关文章

  1. Flutter 基础组件:进度指示器

    前言 Material 组件库中提供了两种进度指示器:LinearProgressIndicator和CircularProgressIndicator,它们都可以同时用于精确的进度指示和模糊的进度指 ...

  2. Flutter 基础组件:单选框和复选框

    前言 Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父 ...

  3. Flutter 基础组件:图片和Icon

    前言 Flutter中,可以通过Image组件来加载并显示图片,Image的数据源可以是asset.文件.内存以及网络. ImageProvider 是一个抽象类,主要定义了图片数据获取的接口load ...

  4. Flutter 基础组件:按钮

    前言 Material组件库中提供了多种按钮组件如RaisedButton.FlatButton.OutlineButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所 ...

  5. Flutter 基础组件:文本、字体样式

    // 文本.字体样式 import 'package:flutter/material.dart'; class TextFontStyle extends StatelessWidget { // ...

  6. Flutter 基础组件:状态管理

    前言 一个永恒的主题,"状态(State)管理",无论是在React/Vue(两者都是支持响应式编程的Web开发框架)还是Flutter中,他们讨论的问题和解决的思想都是一致的. ...

  7. Flutter 基础组件:Widget简介

    概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的 ...

  8. Flutter 基础组件:输入框和表单

    前言 Material组件库中提供了输入框组件TextField和表单组件Form. 输入框TextField 接口描述 const TextField({ Key key, // 编辑框的控制器,通 ...

  9. Flutter基础系列之入门(一)

    1.Flutter是什么? 官方介绍:Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter ...

随机推荐

  1. Route53 health check与 Cloudwatch alarm 没法绑定

    原因 即使在控制台创建 创建的alarm会在us-east-1 不会再其他区域,目前route53 metric 在其他区域不存在. 所以使用cloudformation 创建 route53 hea ...

  2. webrtp官方demo运行

    Google官方提供的webrtc的demo对应的网站是https://webrtc.github.io/samples/ 上面的DEMO对我这种入门的人很有用,用chrome浏览器最新的版本直接可以 ...

  3. leetcode-mid-sorting and searching-162. Find Peak Element

    mycode  54.81% class Solution(object): def findPeakElement(self, nums): """ :type num ...

  4. NAACL 2019 字词表示学习分析

    NAACL 2019 表示学习分析 为要找出字.词.文档等实体表示学习相关的文章. word embedding 搜索关键词 word embedding Vector of Locally-Aggr ...

  5. The file is inaccessible to Server.

    ArcGIS Unable to Start serviceserver安装后,启动服务失败,报错信息如下:Unable to Start service. Error (Server object  ...

  6. RandomAccessFile 文件读写中文乱码解决方案!

    RandomAccessFile 读写文件时,不管文件中保存的数据编码格式是什么   使用 RandomAccessFile对象方法的 readLine() 都会将编码格式转换成 ISO-8859-1 ...

  7. 阶段3 1.Mybatis_08.动态SQL_02.mybatis中动态sql语句-where标签的使用

    这里的userSex是实体类里面的属性名,而不是数据库内的字段名称 一个老王改成性别女,为了区分一下 增加sex字段的查询 where标签 用上where和刚才的执行效果是一样的 where标签使我们 ...

  8. 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 ...

  9. linux使用ltrace和strace跟踪程序执行过程

    yum install strace yum install ltrace 1.strace  ping -c 1 www.baidu.com 2.ltrace  ping -c 1 www.baid ...

  10. Mysql数据库存储数据时间与系统获取时间不一致

    最近进行项目开发,发现存在数据库内的数据和系统查询到的数据相差8小时 发现有2种比较合适的方法 (一)修改mysql服务的区时 centos进入mysql查看/修改时区 1.输入以下命令进入mysql ...