Container相当于iOS中的UIView,可以设置大小,颜色,边框,圆角等属性
MaterialApp、Center和Scaffold也是基础组件,这里先做简单了解
void main() => runApp(MyApp());//入口函数
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override//代表重写build方法,build方法类似于ViewControllerr里的ViewDidLoad
Widget build(BuildContext context) {
return MaterialApp(//MaterialApp和Scaffold
home: Scaffold(
appBar: AppBar(
title: Text('Demo',
style: TextStyle(
color: Colors.red
),),
),
body: HomeContent(),//页面展示的内容
)
);
}
}
Container用法在这里,它的属性有
width、height、child、decoration(背景色,圆角,边框都在这里设置)
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(//让Container在屏幕中居中显示
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.red,//背景色
border: Border.all(//边框
color: Colors.black,//边框色
width: 5//边框宽度
),
borderRadius: BorderRadius.all(
Radius.circular(10),//设置圆角
),
),
padding: EdgeInsets.all(20),//内边距
alignment: Alignment.bottomRight,//内部内容的对齐方式
child: Text('内容',
textAlign: TextAlign.center,//对齐方式
overflow: TextOverflow.ellipsis,//超出范围的显示方式为3个.
maxLines: 1,//最大显示行数
style: TextStyle(fontSize: 30,
color: Colors.orange
),
),
),
);
}
}
网友评论