01：Text Widget 文本组件的使用
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Text('Hello world')
),
),
);
}
}
TextAlign属性
center: 文本以居中形式对齐,这个也算比较常用的了。
left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
right :右对齐，使用频率也不算高。
start:以开始位置进行对齐，类似于左对齐。
end: 以为本结尾处进行对齐，不常用。有点类似右对齐.
overflow属性：用来设置文本溢出
clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的。
child:Text(
'Hello QGS,非常喜欢前端',
textAlign:TextAlign.left,
)
maxLines属性
child:Text(
'Hello QGS,非常喜欢前端，字不够多，需要加多字数',
textAlign:TextAlign.left,
//设置值显示一行
maxLines: 1,
)
style属性
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Text(
'Hello QGS',
textAlign:TextAlign.left,
overflow:TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize:25.0,
color:Color.fromARGB(255, 255, 150, 150),
decoration:TextDecoration.underline,
decorationStyle:TextDecorationStyle.solid,
),
)
),
),
);
}
}
02：Container容器控件的使用
Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的<div>标签，每个页面或者说每个视图都离不开它。
Alignment属性
bottomCenter:下部居中对齐。
botomLeft: 下部左对齐。
bottomRight：下部右对齐。
center：纵横双向居中对齐。
centerLeft：纵向居中横向居左对齐。
centerRight：纵向居中横向居右对齐。
topLeft：顶部左侧对齐。
topCenter：顶部居中对齐。
topRight： 顶部居左对齐。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
child:new Text('Hello QGS',style: TextStyle(fontSize: 20.0),),
alignment: Alignment.center,
),
),
),
);
}
}
设置宽、高和颜色属性
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.center,
width:500.0,
height:400.0,
color: Colors.purpleAccent,
),
padding属性
padding的属性就是一个内边距
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
color: Colors.lightBlue,
padding:const EdgeInsets.all(10.0),
//那我们设置上边距为30，左边距为10，就可以用下面的代码来编写
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
),
margin属性
margin的属性就是一个外边距,其用法和padding相同
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
color: Colors.lightBlue,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
),
decoration属性
decoration是 container 的修饰器，主要的功能是设置背景和边框。
比如你需要给背景加入一个渐变，这时候需要使用BoxDecoration这个类，代码如下（需要注意的是如果你设置了decoration，就不要再设置color属性了，因为这样会冲突）
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
)
),
),
设置边框
设置边框可以在decoration里设置border属性，比如你现在要设置一个红色边框，宽度为2
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border:Border.all(width:2.0,color:Colors.red)
),
),
04：Image图片组件的使用
加入图片的几种方式
Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
Image.network:网络资源图片
Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关
Image.memory:加载Uint8List资源图片
fit属性的设置
fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的
BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain:全图显示，显示原比例，可能会有空隙。
BoxFit.cover:显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth:宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight:高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown:效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。
图片的混合模式
图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色
child:new Image.network(
'http://jspang.com/static/myimg/blogtouxiang.jpg',
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,
),
repeat图片重复
ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX: 横向重复，纵向不重复。
ImageRepeat.repeatY：纵向重复，横向不重复。
child:new Image.network(
'http://jspang.com/static/myimg/blogtouxiang.jpg',
repeat: ImageRepeat.repeat,
),
网友评论