Flutter 四:基础部件
程序员文章站
2022-05-30 17:33:16
...
文章目录
1.Text：文字与文字样式
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
final TextStyle _textStyle=TextStyle(
fontSize:16.0,
);
final String _author='李白';
final String _title='将进酒';
@override
Widget build(BuildContext context) {
// TODO: implement build
return Text(
'《$_title》——$_author。君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。',
textAlign: TextAlign.left,//对齐方式
style: _textStyle,//文字样式
maxLines: 3,//最多三行
overflow: TextOverflow.ellipsis,//多出来的用省略号代替
);
}
}
2.RichText：行内多样式的文字
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return RichText(
text: TextSpan(
text:'ninghao',
style:TextStyle(
color: Colors.deepPurpleAccent,
fontSize: 34.0,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w100,
),
children: [//子部件，其他样式
TextSpan(
text: '.net',
style: TextStyle(
fontSize:17.0,
color:Colors.grey,
),
)
]
)
);
}
}
3.Container：容器
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(//容器
color:Colors.grey[100],
child:Row(//Row小部件可以放一些水平放置的部件
children:<Widget>[
Container(
child:Icon(Icons.pool,size:32.0,color:Colors.white),
color: Color.fromRGBO(3, 54, 255, 1.0),
padding: EdgeInsets.all(16.0),//内边距
margin: EdgeInsets.all(8.0),//外边距
width:90.0,
height: 90.0,
)
]
)
);
}
}
4.BoxDecoration：装饰盒子
出现这个错，是因为重复添加了color
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(//容器
color:Colors.grey[100],
child:Row(//Row小部件可以放一些水平放置的部件
mainAxisAlignment: MainAxisAlignment.center,//主轴对齐，居中
children:<Widget>[
Container(
child:Icon(Icons.pool,size:32.0,color:Colors.white),
//color: Color.fromRGBO(3, 54, 255, 1.0),
padding: EdgeInsets.all(16.0),//内边距
margin: EdgeInsets.all(8.0),//外边距
width:90.0,
height: 90.0,
decoration: BoxDecoration(//装饰盒子
color:Color.fromRGBO(3, 54, 255, 1.0),
),
)
]
)
);
}
}
5.BoxDecoration：边框（border）
上下添加边框：
decoration: BoxDecoration(//装饰盒子
color:Color.fromRGBO(3, 54, 255, 1.0),
border: Border(
top:BorderSide(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),
bottom:BorderSide(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),
)
),
周围都添加边框：
border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),
6.圆角效果
borderRadius: BorderRadius.circular(16.0),//圆角效果,圆形的盒子不能有圆角效果
单独设置：
borderRadius: BorderRadius.only(
topLeft:Radius.circular(64.0),//左上角
bottomLeft:Radius.circular(64.0),//左下角
)//圆角效果,圆形的盒子不能有圆角效果
decoration: BoxDecoration(//装饰盒子
color:Color.fromRGBO(3, 54, 255, 1.0),
border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),//边框效果
borderRadius: BorderRadius.only(
topLeft:Radius.circular(64.0),//左上角
bottomLeft:Radius.circular(64.0),//左下角
)//圆角效果
),
7.BoxDecoration：阴影（borderShadow）
boxShadow: [
BoxShadow(
offset:Offset(0.0,7.0),//阴影偏移,x,y
color: Color.fromRGBO(16,20, 188, 1.0),//颜色，默认黑色
blurRadius: 20.0,//值越大，模糊程度越明显
spreadRadius: -3.0,//控制阴影的扩撒程度，为正就会扩大，为负就会缩小
),
]
8.BoxDecoration：形状（shape）
圆角效果,圆形的盒子不能有圆角效果
shape: BoxShape.circle,
9. BoxDecoration：渐变（gradient）
gradient: RadialGradient(//镜像渐变
colors: [
Color.fromRGBO(7, 102, 255, 1.0),
Color.fromRGBO(3, 28, 128, 1.0),
],
),
gradient: LinearGradient(//RadialGradient镜像渐变,LinearGradient线性渐变，默认从左到右
colors: [
Color.fromRGBO(7, 102, 255, 1.0),
Color.fromRGBO(3, 28, 128, 1.0),
],
begin: Alignment.topCenter,//可设置渐变方向
end: Alignment.bottomCenter,
),
10.BoxDecoration：背景图像（image）
decoration: BoxDecoration(//设置背景图片
image:DecorationImage(
image:NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
alignment:Alignment.topCenter,
//repeat: ImageRepeat.repeatY,//延Y轴重复
fit:BoxFit.cover,//填充方式，填满
colorFilter:ColorFilter.mode(//加滤镜
Colors.indigoAccent[400].withOpacity(0.5),
BlendMode.hardLight,
),
)
),
完整dart
import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(//容器
//color:Colors.grey[100],
decoration: BoxDecoration(//设置背景图片
image:DecorationImage(
image:NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
alignment:Alignment.topCenter,
//repeat: ImageRepeat.repeatY,//延Y轴重复
fit:BoxFit.cover,//填充方式，填满
colorFilter:ColorFilter.mode(//加滤镜
Colors.indigoAccent[400].withOpacity(0.5),
BlendMode.hardLight,
),
)
),
child:Row(//Row小部件可以放一些水平放置的部件
mainAxisAlignment: MainAxisAlignment.center,//主轴对齐，居中
children:<Widget>[
Container(
child:Icon(Icons.pool,size:32.0,color:Colors.white),
//color: Color.fromRGBO(3, 54, 255, 1.0),
padding: EdgeInsets.all(16.0),//内边距
margin: EdgeInsets.all(8.0),//外边距
width:90.0,
height: 90.0,
decoration: BoxDecoration(//装饰盒子
color:Color.fromRGBO(3, 54, 255, 1.0),
border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),//边框效果
//borderRadius: BorderRadius.circular(16.0),//圆角效果,圆形的盒子不能有圆角效果
boxShadow: [
BoxShadow(
offset:Offset(0.0,7.0),//阴影偏移,x,y
color: Color.fromRGBO(16,20, 188, 1.0),//颜色，默认黑色
blurRadius: 20.0,//值越大，模糊程度越明显
spreadRadius: -3.0,//控制阴影的扩撒程度，为正就会扩大，为负就会缩小
),
],
shape: BoxShape.circle,
gradient: LinearGradient(//RadialGradient镜像渐变,LinearGradient线性渐变，默认从左到右
colors: [
Color.fromRGBO(7, 102, 255, 1.0),
Color.fromRGBO(3, 28, 128, 1.0),
],
begin: Alignment.topCenter,//可设置渐变方向
end: Alignment.bottomCenter,
),
),
)
]
)
);
}
}