import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title:Text("flutter demo")
),
body:HomeContent()
)
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: Text(
'hello world 学无止境的最高境界！！！',
textAlign:TextAlign.left,
overflow:TextOverflow.ellipsis ,
// overflow:TextOverflow.fade ,
maxLines: 1,
textScaleFactor: 1.8,
style:TextStyle(
fontSize: 16.0,
color:Colors.red,
// color:Color.fromARGB(a, r, g, b)
fontWeight: FontWeight.w800,
fontStyle: FontStyle.italic,
decoration:TextDecoration.lineThrough,
decorationColor:Colors.white,
decorationStyle: TextDecorationStyle.dashed,
letterSpacing: 5.0
)
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.blue,
width: 2.0
),
borderRadius: BorderRadius.all(
// Radius.circular(150), //圆形
Radius.circular(10),
)
),
// padding:EdgeInsets.all(20),
// padding:EdgeInsets.fromLTRB(10, 30, 5, 0)
margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
// transform:Matrix4.translationValues(100,0,0)
// transform:Matrix4.rotationZ(0.3)
// transform:Matrix4.diagonal3Values(1.2, 1, 1)
alignment: Alignment.bottomLeft,
),
);
}
}
Flutter Text 组件
TextAlign属性
TextAlign属性就是文本的对齐方式，它的属性值有如下：
center: 文本以居中形式对齐,这个也算比较常用的了。
left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
right :右对齐，使用频率也不算高。
start:以开始位置进行对齐，类似于左对齐。
end: 以为本结尾处进行对齐，不常用。有点类似右对齐.
justfy 两端对齐
最常用的三个：left(左对齐)、center（居中对齐）、right（右对齐）
maxLines属性
设置最多显示的行数，比如我们现在只显示1行。代码如下：
child:Text(
'Hello',
textAlign:TextAlign.left,
maxLines: 1,
)
overflow属性
overflow属性是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。
clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦。
style属性
style属性
字体的样式设置
下面是 TextStyle 的参数 :
|
名称 |
功能 |
|
decoration |
文字装饰线(none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线) |
decorationColor |
文字装饰线颜色 |
decorationStyle |
文字装饰线风格([dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪 线) |
|
wordSpacing |
单词间隙(如果是负值，会让单词变得更紧 凑 |
letterSpacing |
字母间隙(如果是负值，会让字母变得更紧 凑) |
|
fontStyle |
文字样式(italic 斜体，normal 正常体) |
|
fontSize |
文字大小 |
|
color |
文字颜色 |
|
fontWeight |
字体粗细(bold 粗体，normal 正常体) |
Container容器组件
Container（容器控件）在Flutter是经常使用的控件，它就相当于HTML里的<div>标签，每个页面或者说每个视图都离不开它。
alignment属性
其实容器的作用就是方便我们进行布局的，Flutter这点也作的很好，我们先来看容器属性中的Alignment。
这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。
先作一个效果：建立一个容器，然后容器内加入一段文字, 并让它居中对齐。
topCenter:顶部居中对齐
topLeft:顶部左对齐
topRight:顶部右对齐
center:水平垂直居中对齐
centerLeft:垂直居中水平居左对齐
centerRight:垂直居中水平居右对齐
bottomCenter 底部居中对齐
bottomLeft:底部居左对齐
bottomRight:底部居右对齐
child:Container(
child:new Text('Hello',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.center,
),
设置宽、高和颜色属性
设置宽、高和颜色属性是相对容易的，只要在属性名称后面加入浮点型数字就可以了， 示例代码如下：
child:Container(
child:new Text('Hello,style: TextStyle(fontSize: 40.0),),
alignment: Alignment.center,
width:200.0,
height:40.0,
color: Colors.lightBlue,
),
padding属性
padding的属性就是一个内边距，它和你使用的前端技术CSS里的padding表现形式一样，指的是Container边缘和child内容的距离。设置内边距为10的示例代码如下：
child:Container(
child:new Text('Hello',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:200.0,
height:40.0,
color: Colors.lightBlue,
padding:const EdgeInsets.all(10.0),
),
核心代码：
padding:const EdgeInsets.all(10.0),
意思是设置Container的内边距是10，左右上下全部为10
如果设置不一样，则使用下列的方法实现：
EdgeInsets.fromLTRB(value1,value2,value3,value4)
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0), //上边距为30，左边距为10
margin属性
margin是外边距，只的是container和外部元素的距离。
方法同padding使用相同
margin: const EdgeInsets.all(10.0),
margin:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),//上外边距为30，左外边距为10
decoration属性
decoration是 container 的修饰器，主要的功能是设置背景和边框。
比如你需要给背景加入一个渐变，这时候需要使用BoxDecoration这个类，代码如下（需要注意的是如果你设置了decoration，就不要再设置color属性了，因为这样会冲突）。
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:200.0,
height:40.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。代码如下：
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border:Border.all(width:2.0,color:Colors.red)
),
设置圆角，圆形等外框
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.blue,
width: 2.0
),
borderRadius: BorderRadius.all(
// Radius.circular(150), //圆形
Radius.circular(10),
)
),
transform 属性
让 Container 容易进行一些旋转之类的
// transform:Matrix4.translationValues(100,0,0)
// transform:Matrix4.rotationZ(0.3)
transform:Matrix4.diagonal3Values(1.2, 1, 1)
