一、Container和Text
void main() {
// runApp(const MyApp());
runApp(new MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
)
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Container(
child: Text(
"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
textAlign: TextAlign.left,
overflow: TextOverflow.fade,
textScaleFactor: 2,
maxLines: 1,
style: TextStyle(
fontSize: 16.0,
color: Colors.red,
fontWeight: FontWeight.w900,
fontStyle: FontStyle.italic,
decoration: TextDecoration.lineThrough
),
),
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(20.0))
),
margin: EdgeInsets.all(20),
padding: EdgeInsets.fromLTRB(20,10,20,10),
// transform: Matrix4.translationValues(100, 0, 0),
transform: Matrix4.rotationZ(-0.3),
)
);
}
}
一、图片组件
Image.asset 本地图片
Image.network 远程图片
远程图片、图片圆角
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Container(
child:ClipOval(
child: Image.network(
"https://upload-images.jianshu.io/upload_images/27205827-7890737d4be16e42.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1080/format/webp",
alignment: Alignment.bottomRight,
color: Colors.blue,
colorBlendMode: BlendMode.screen,
fit: BoxFit.cover,
repeat: ImageRepeat.repeat,
),
),
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.yellow
),
),
);
}
}
本地图片
2.0x和3.0x是必须的
image.png
然后打开pubspec.yaml声明一下添加的图片文件，注意要配置对
image.png
最后就可以在代码中用了
child: Image.asset("images/a.jpeg",)
