基础部件
Text文本
class TextDemo extends StatelessWidget {
final String _author = '李白';
final String _title = '将进酒';
final TextStyle _textStyle = TextStyle(
fontSize: 16.0,
);
@override
Widget build(BuildContext context) {
return Text(
'$_title - $_author 君不见,黄河之水天上来,奔流到海不复回。君不见,高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。烹羊宰牛且为乐,会须一饮三百杯。岑夫子,丹丘生,将进酒,杯莫停。与君歌一曲,请君为我倾耳听。钟鼓馔玉不足贵,但愿长醉不复醒。古来圣贤皆寂寞,惟有饮者留其名。陈王昔时宴平乐,斗酒十千恣欢谑。主人何为言少钱,径须沽取对君酌。 五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。',
textAlign: TextAlign.left,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: _textStyle,
);
}
}
RichText富文本
class RichTextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RichText(
text: TextSpan(
text: "你好呀",
style: TextStyle(
color: Colors.red,
fontSize: 34.0,
fontStyle: FontStyle.italic, //斜体
fontWeight: FontWeight.w100,
),
children: [TextSpan(
text: "我很好",
style: TextStyle(
fontSize: 12.0,
color: Colors.blue,
),
),TextSpan(
text: "我很好",
style: TextStyle(
fontSize: 10.0,
color: Colors.purpleAccent,
),
)],
),
);
}
}
Container容器
默认这个容器会尽可能的沾满整个页面
设置容器尺寸,需要放在Row或Column里面
Container只有一个孩子child:
child里面可以嵌套Row()
Row里面有children:[]属性
里面可以继续增添Container
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black12,
child: Row(
mainAxisAlignment: MainAxisAlignment.center, //设置居中
children: <Widget>[
Container(
child: Icon(
Icons.change_history,
size: 30.0,
color: Colors.purpleAccent,
),
color: Colors.red,
width: 90.0,
height: 90.0,
margin: EdgeInsets.all(90.0),
// padding: EdgeInsets.only(left: 100, top: 120.0, right: 0.0, bottom: 0.0),
),
],
),
);
}
}
BoxDecoration装饰盒子
使用Container里面的decoration,并且传入BoxDecoration属性
color: Colors.amber,
边框border
border: Border.all(
color: Colors.indigoAccent,
width: 6.0,
style: BorderStyle.solid,
),
/* border: Border(
left: BorderSide(
color: Colors.indigoAccent,
width: 3.0,
style: BorderStyle.solid,
),
top: BorderSide(
color: Colors.indigoAccent,
width: 3.0,
style: BorderStyle.solid,
),
right: BorderSide(
color: Colors.indigoAccent,
width: 3.0,
style: BorderStyle.solid,
),
bottom: BorderSide(
color: Colors.indigoAccent,
width: 3.0,
style: BorderStyle.solid,
)),*/
圆角borderRadius
// borderRadius: BorderRadius.all(Radius.circular(10)), //给全部的角设置边缘弧度
// borderRadius: BorderRadius.circular(18.0), //给全部的角设置边缘弧度
borderRadius: BorderRadius.circular(18.0),
阴影boxShadow
boxShadow: <BoxShadow>[
BoxShadow(
offset: Offset(10.0, 5.0),//阴影的xy值
color: Color.fromRGBO(16, 20, 188, 0.8),//颜色和透明度
blurRadius: 10,//模糊度
spreadRadius: -2,//扩散
),
],
形状shape
shape: BoxShape.circle, //使用这个不能使用圆角效果,因为这个本来就是圆角的
渐变
RadialGradient 径向渐变
LinearGradient 线性渐变
gradient: LinearGradient(
colors: [
Color.fromRGBO(222,102,255,1.0),
Color.fromRGBO(3,12,125,1.0),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
gradient: RadialGradient(
colors: [
Color.fromRGBO(222,102,255,1.0),
Color.fromRGBO(3,12,125,1.0),
],
),
图像背景
在顶层的ColorFilter里面创建decoration: BoxDecoration(),用这个属性,不能用同级别color属性
decoration: BoxDecoration(
image: DecorationImage(
// image: AssetImage(), //使用项目里面的图像
alignment: Alignment.topCenter, //设置居中方式为顶部居中
repeat: ImageRepeat.repeatX, //设置重复模式为y轴重复
colorFilter:ColorFilter.mode(Colors.indigoAccent[400].withOpacity(0.5), BlendMode.hardLight),//滤镜 第二个参数为过滤模式 为强光
image: NetworkImage(
r"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583413485756&di=5ed832cd1189db6a72ebd8e40a1084de&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F20%2F20150820112143_JMfN4.png"), //使用网络的图像
)),
import 'package:flutter/material.dart';
class BasicDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// return TextDemo();
// return RichTextDemo();
// return ContainerDemo();
return Container(
// color: Colors.black12,
decoration: BoxDecoration(
image: DecorationImage(
// image: AssetImage(), //使用项目里面的图像
alignment: Alignment.topCenter, //设置居中方式为顶部居中
repeat: ImageRepeat.repeatX, //设置重复模式为y轴重复
colorFilter:ColorFilter.mode(Colors.indigoAccent[400].withOpacity(0.5), BlendMode.hardLight),//滤镜 第二个参数为过滤模式 为强光
image: NetworkImage(
r"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583413485756&di=5ed832cd1189db6a72ebd8e40a1084de&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F20%2F20150820112143_JMfN4.png"), //使用网络的图像
)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center, //设置居中
children: <Widget>[
Container(
child: Icon(
Icons.change_history,
size: 30.0,
color: Colors.purpleAccent,
),
width: 90.0,
height: 90.0,
margin: EdgeInsets.all(90.0),
// padding: EdgeInsets.only(left: 100, top: 120.0, right: 0.0, bottom: 0.0),
decoration: BoxDecoration(
color: Colors.amber,
// borderRadius: BorderRadius.all(Radius.circular(10)), //给全部的角设置边缘弧度
// borderRadius: BorderRadius.circular(18.0), //给全部的角设置边缘弧度
// borderRadius: BorderRadius.circular(18.0),
shape: BoxShape.circle,
//使用这个不能使用圆角效果,因为这个本来就是圆角的
/* gradient: LinearGradient(
colors: [
Color.fromRGBO(222,102,255,1.0),
Color.fromRGBO(3,12,125,1.0),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),*/
gradient: RadialGradient(
colors: [
Color.fromRGBO(222, 102, 255, 1.0),
Color.fromRGBO(3, 12, 125, 1.0),
],
),
boxShadow: <BoxShadow>[
BoxShadow(
offset: Offset(10.0, 5.0), //阴影的xy值
color: Color.fromRGBO(16, 20, 188, 0.8), //颜色和透明度
blurRadius: 10, //模糊度
spreadRadius: -2, //扩散
),
],
border: Border.all(
color: Colors.indigoAccent,
width: 6.0,
style: BorderStyle.solid,
),
/* border: Border(
left: BorderSide(
color: Colors.indigoAccent,
width: 3.0,
style: BorderStyle.solid,
),
top: BorderSide(
color: Colors.indigoAccent,
width: 3.0,
style: BorderStyle.solid,
),
right: BorderSide(
color: Colors.indigoAccent,
width: 3.0,
style: BorderStyle.solid,
),
bottom: BorderSide(
color: Colors.indigoAccent,
width: 3.0,
style: BorderStyle.solid,
)),*/
),
),
],
),
);
}
}
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black12,
child: Row(
mainAxisAlignment: MainAxisAlignment.center, //设置居中
children: <Widget>[
Container(
child: Icon(
Icons.change_history,
size: 30.0,
color: Colors.purpleAccent,
),
color: Colors.red,
width: 90.0,
height: 90.0,
margin: EdgeInsets.all(90.0),
// padding: EdgeInsets.only(left: 100, top: 120.0, right: 0.0, bottom: 0.0),
),
],
),
);
}
}
class RichTextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RichText(
text: TextSpan(
text: "你好呀",
style: TextStyle(
color: Colors.red,
fontSize: 34.0,
fontStyle: FontStyle.italic, //斜体
fontWeight: FontWeight.w100,
),
children: [
TextSpan(
text: "我很好",
style: TextStyle(
fontSize: 12.0,
color: Colors.blue,
),
),
TextSpan(
text: "我很好",
style: TextStyle(
fontSize: 10.0,
color: Colors.purpleAccent,
),
)
],
),
);
}
}
class TextDemo extends StatelessWidget {
final String _author = '李白';
final String _title = '将进酒';
final TextStyle _textStyle = TextStyle(
fontSize: 16.0,
);
@override
Widget build(BuildContext context) {
return Text(
'$_title - $_author 君不见,黄河之水天上来,奔流到海不复回。君不见,高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。烹羊宰牛且为乐,会须一饮三百杯。岑夫子,丹丘生,将进酒,杯莫停。与君歌一曲,请君为我倾耳听。钟鼓馔玉不足贵,但愿长醉不复醒。古来圣贤皆寂寞,惟有饮者留其名。陈王昔时宴平乐,斗酒十千恣欢谑。主人何为言少钱,径须沽取对君酌。 五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。',
textAlign: TextAlign.left,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: _textStyle,
);
}
}