在flutter的世界裏,一切都是Widget,圖像,文本,佈局模型等等,一切都是Widget
flutter中,儘量將Widget放在MaterialApp。其封裝了所需要的一些Widget,MaterialApp一般作爲頂層widget,而在MaterialApp內部設置Scaffold,因爲Scaffold提供了頁面banner等佈局基本實現,如下:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text(
'flutter Demo'
)
),
body: HomeCenter()
)
);
}
如果需要設置一個Widget的margin,padding,background等屬性,可以將該Widget放置在 Container裏面,如下:
Center(
child: Container(
child: Text('我是一個txt'),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.green,
width: 2.0
)
),
)
如果需要設置一段文字的字體,顏色等,可以通過下面屬性:
Text(
'我是一個txt',
textAlign: TextAlign.center,
style: TextStyle(
decoration: TextDecoration.lineThrough
),
)
列表組件
可以分爲垂直列表。水平列表。動態列表。矩陣列表
flutter中使用頻率最高的就是垂直(Column)或者水平佈局(Row),
其實界面的骨架都可以使用Column和Row實現,可以使用 mainAxisAlignment 和 crossAxisAlignment 屬性控制行或列如何對齊其子項。對於一行(Row)來說,主軸水平延伸,交叉軸垂直延伸。對於一列來說,主軸垂直延伸,交叉軸水平延伸。
除了通過Row和Column佈局列表,還可以使用 ListView進行佈局,區別就是ListView可以自適應寬度和高度,用法如下:
ListView(
padding: EdgeInsets.all(10),
children: <Widget>[
//ListTile 通常用於在 Flutter 中填充 ListView
ListTile(
//主標題
title: Text( '大標題1',),
//副標題
subtitle: Text('小標題1')
),
)
將圖像或圖標添加到列表的開頭。這通常是一個圖標。
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(imageUrl),
),
title: Text('Horse'),
)
設置拖尾將在列表的末尾放置一個圖像。這對於指示主-細節佈局特別有用。
ListTile(
title: Text('Horse'),
trailing: Icon(Icons.keyboard_arrow_right),
)
通過scrollDirection屬性一個列表到底是水平列表還是垂直列表(默認是垂直列表)scrollDirection: Axis.horizontal
GridView用於創建網格佈局,注意一定要有crossAxisCount,指定網格佈局多少列,否則界面無法顯示,示例如下:
GridView.count(
// 控制多少列,下面表示顯示3列
crossAxisCount: 3,
children: this._getData()
)
除了可以通過Container控制padding,還可以直接通過Padding控制,如下:
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Container(width: 30, height: 30, color: Colors.yellow),
)
Expanded可以控制一個元素延伸以佔據剩餘空間,當要控制多個Expanded佔據比例,可以使用flex,如下:
Row(
children: <Widget>[
Expanded(
flex: 1,
child: IconContainer(Icons.search,Colors.red)
),
Expanded(
flex: 2,
child: IconContainer(Icons.search,Colors.yellow)
),
Expanded(
flex: 1,
child: IconContainer(Icons.search,Colors.black)
)
],
)
如果需要實現絕對定位和相對定位,可以使用Stack層疊組件,Stack與Align,Stack與Positioned實現定位佈局
Stack(
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Icon(Icons.home,size:40,color:Colors.white)
),
Align(
alignment: Alignment.center,
child: Icon(Icons.search,size:40,color:Colors.white)
),
Align(
alignment: Alignment.bottomRight,
child: Icon(Icons.send,size:40,color:Colors.white)
)
],
)
//通過Positioned,可以有left和top實現更加精確的定位
Stack(
children: <Widget>[
Positioned(
left: 100,
top: 100,
child: Icon(Icons.home,size:40,color:Colors.white)
),
Positioned(
left: 50,
child: Icon(Icons.search,size:40,color:Colors.white)
),
Positioned(
bottom: 0,
child: Icon(Icons.send,size:40,color:Colors.white)
)
],
)
如果想實現卡片的效果,可以使用Card
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
// 配置子元素的寬高比
AspectRatio(
aspectRatio: 20/9,
child: Container(
color: Colors.red,
)
),
ListTile(
leading: ClipOval(
child: Container(width: 50,height: 50,color: Colors.yellow)
),
title: Text('標題'),
subtitle: Text('副標題'),
)
],
),
)
頁面插入圖片根據圖片組件Image,主要有兩種方法:
- 遠程圖片:Image.network。將圖片的url作爲參數傳給network即可,如下:
Image.network(
'https://himg2.huanqiucdn.cn/attachment2010.jpg',
// 方位,可以設置圖片的方位
alignment: Alignment.center,
// cover是項目中最常用的
fit: BoxFit.cover
)
如果想要設置一個圓形圖片,可以用ClipOval包裹住Image,如下:
ClipOval(
child: Image.network(
'https://himg2.huanqiucdn.cn/attachment2010.jpg',
width: 300,
height: 300,
fit: BoxFit.cover
),
)
- 本地圖片:Image.asset
tips:
1.在dart中實例化類的時候,可以不寫new
2.flutter中所有和數字相關的都是double,所有使用double類型,比如寬度,高度等。
掃碼關注公衆號,有更多精彩文章等你哦