Flutter 跨平台開發架構-基本Widget
官方提供了多個基本的Widget可以使用,
使用Widget前先要有一些基本概念
本篇會簡單介紹幾個Widget。
Margin:外部間隔距離
Padding:內部間隔距離
alignment基本可以把一個區塊切成9格,分成水平垂直方向
Scaffold:
在預設建立的APP中,由MaterialApp的Home載入的widget就是Scaffold,
他建立了經常使用到的APP介面,主要分四個部分
AppBar:上方的巡覽列
Bottom:下方的功能巡覽列
Body:中間的內容
FloatingActionButton:右下方的浮動按鈕
Container
Container在Flutter是一個很常被使用到的容器,
其中以下幾個屬性常被使用到
child:子容器,可放置一個
color:背景顏色
alignment:對齊方式
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('MyFlutter'),
),
body: MyContainer(),
));
}
}
class MyContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}
試著改變背景顏色,加入一個Text,並改變對齊方式
@override
Widget build(BuildContext context) {
return Container(
child: Text("我是TEXT"),
color: Colors.yellow,
alignment: Alignment.centerLeft,
);
}
Column與Row
這兩個其實是功能相同的Widget,只有方向不同而已,
Row是水平擺放,而Column則是垂直方向。
比較需要了解的是它的對齊方式,
start:對齊起始點
end:對齊終點
center:置中對齊
spaceBetween:中間留空間
spaceAround:均分兩側空間
spaceEvenly: 均分剩餘空間
stretch:佔滿縱向
baseline:對齊baseline
以column為例
class MyColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [Text("Test1"), Text("Test2"), Text("Test3"), Text("Test4")],
),
alignment: Alignment.centerLeft,
);
}
}
未給予對齊設定時預設畫面如圖
接著設定他的對齊方式
return Container(
child: Column(
children: [Text("Test1"), Text("Test2"), Text("Test3"), Text("Test4")],
mainAxisAlignment: MainAxisAlignment.center,
),
alignment: Alignment.centerLeft,
);
ListView
ListView是APP中很常用到的UI,其功能為展現多筆資料使用。
在這裡我們簡單使用ListView.builder來建立簡單的List資訊
class MyListView extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<String> items = [];
for (var i = 1; i <= 100; i++) items.add("Item$i");
return Container(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text('${items[index]}'));
},
),
alignment: Alignment.centerLeft,
);
}
}
其執行結果
SnackBar
SnackBar通常用在於通知訊息使用,
他會在畫面下方長出訊息,並在一段時間後消失。
class MySnackBar extends StatelessWidget {
SnackBar snackBar = SnackBar(content: Text("我就是SnackBar"));
@override
Widget build(BuildContext context) {
return Container(
child: OutlineButton(
child: Text('點我'),
onPressed: () {
Scaffold.of(context).showSnackBar(snackBar);
}),
alignment: Alignment.center);
}
}
範例程式碼下載
https://bitbucket.org/steven0529/flutterdemo/src/master/