文章目录
一、Text
1.Text
-
TextDirection(文本方向)
-
TextStyle(文本样式)
-
colors(颜色)
-
FontWeit(字体粗细)
-
FontStyle(字体样式)
-
-
TextAlign(文本对齐)
-
TextOverflow(文本溢出)
-
MaxLines(指定显示的行数)
2. RichText和TextSpan
作用:给一段文本声明多个不同的样式
3. 代码
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
'abcdefgshdjsksandsndskdhshdaidisjda',
maxLines: 3,
overflow: TextOverflow.ellipsis,
textDirection: TextDirection.ltr,
textAlign: TextAlign.left,
textScaleFactor: 1.5,
style: TextStyle(
color: Colors.red,
fontSize: 30,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.blue
),
),
RichText(
text: TextSpan(
text: 'hello',
style: TextStyle(
fontSize: 40,
color: Colors.red
),
children: [
TextSpan(
text: 'Flutter',
style: TextStyle(
fontSize: 20,
color: Colors.blue
)
)
]
)
)
],
);
}
}
4.效果
二、Icon
1.Icon
-
Flutter中的图标库(需要一些魔法才能进去)
-
Icon(Icons.具体名称)
2.代码
class imageIconDemo extends StatelessWidget {
const imageIconDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Icon(Icons.add),
IconButton(
onPressed: () {},
icon: Icon(Icons.home),
),
Container(
width: double.infinity,
child: Image.asset(
"images/1.png",
fit: BoxFit.fitHeight,
),
),
],
);
}
}
4.效果
三、Color
1.color(自定义颜色)
-
Flutter中通过ARGB来声明颜色
-
const Color(0xFF42A5F5)//16进制的ARGB=透明度+六位十六进制颜色
-
const Color.fromARGB(0xFF,0x42,0xA5,0xF5)
-
const Color.fromARGB(255,66,165,245)
-
const Color.fromRGBO(66,165,245,1.0)//O=Opacity
2.Colors(英文字母声明的颜色)
- Colors.blue
3.代码
class colorDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
RichText(
text: TextSpan(
text: 'hello',
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 255)
),
children: [
TextSpan(
text: 'Flutter',
style: TextStyle(
color: Color.fromRGBO(255, 0, 0, 0.5)
)
),
TextSpan(
text: 'Flutter',
style: TextStyle(
color: Color.fromARGB(0xFF, 0x00, 0xFF, 0x00)
)
)
]
)
)
],
);
}
}
4.效果
四、Container
1.Container
-
child(声明子组件)
-
padding/margin(填充)
- EdgeInsets.(all(),fromLTRB(),only())
-
decoration
- BoxDecoration(边框-border,圆角-borderRadius,渐变-gradient,阴影-boxShadow,背景色-color,背景图片-image等)
-
alignment
- Alignment(内容对齐)
-
transform
- Matrix4(平移-translate、选择-rotate、缩放-scale、斜切-skew)
2.代码
class ContainerDemo extends StatelessWidget {
const ContainerDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text(
'abcdefgshdjsksandsndskdhshdaidisjdakhdasdhkdhhdihdhahdiajhdi',
style: TextStyle(
fontSize: 30,
),
),
width: 200,
height: 400,
// width: double.infinity,
// height: double.infinity,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.fromLTRB(10.0, 30.0, 0.0, 5.0),
alignment: Alignment.center,
//平移
// transform: Matrix4.translationValues(1000, 0, 0),
//旋转
// transform: Matrix4.rotationZ(0.1),
transform: Matrix4.skewX(0.2),
decoration: BoxDecoration(
// border: Border(
// top: BorderSide(
// width: 10.0,
// color: Colors.red
// ),
// bottom: BorderSide(
// width: 10.0,
// color: Colors.red
// ),
// right: BorderSide(
// width: 10.0,
// color: Colors.red
// ),
// left: BorderSide(
// width: 10.0,
// color: Colors.red
// ),
// )
border: Border.all(
width: 10.0,
color: Colors.red
),
// borderRadius: BorderRadius.all(Radius.circular(30)),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30)
),
color: Colors.lightGreen[100],
//设置渐变后,背景色失效
gradient: LinearGradient(colors: [Colors.lightBlue,Colors.white12]),
),
);
}
}