Container相當于iOS中的UIView,可以設置大小,顏色,邊框,圓角等屬性
MaterialApp、Center和Scaffold也是基礎組件,這里先做簡單了解
void main() => runApp(MyApp());//入口函數(shù)
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,//最大顯示行數(shù)
style: TextStyle(fontSize: 30,
color: Colors.orange
),
),
),
);
}
}