經過Basic Widgets的介紹後,相信大家已經對Material組件的樣貌十分熟悉。而我們在規劃App的架構時,便會先思考產品頁面欲呈現的區塊的功能,並依照需求放置「靜態」元件,待頁面放置確認後,再循序添加互動、頁面跳轉等功能。下方即是一個基本的Scaffold,放置靜態元件的頁面規劃範例。
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
title: 'Flutter Tutorial',
home: TutorialHome(),
),
);
}
class TutorialHome extends StatelessWidget {
const TutorialHome({super.key});
@override
Widget build(BuildContext context) {
// Scaffold is a layout for
// the major Material Components.
return Scaffold(
appBar: AppBar(
leading: const IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: const Text('Example title'),
actions: const [
IconButton(
icon: Icon(Icons.search),
onPressed: null,
),
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
// body is the majority of the screen.
body: const Center(
child: Text('Hello, world!'),
),
floatingActionButton: const FloatingActionButton(
tooltip: 'Add', // used by assistive technologies
onPressed: null,
child: Icon(Icons.add),
),
);
}
}
Material Widgets使用範例
通常我們稱Material Components為" Android Style "的組件樣貌,若是今天想要創建IOS-style的組件,即可參考Cupertino (iOS-style) widgets
的使用方式!
我們把剛剛的Material Scaffold佈局換成Cupertino的寫法,由輸出結果可以看到兩者的元件在繪製與程式使用上的差異,而在使用Cupertino元件時,則需要引入對應套件,import 'package:flutter/cupertino.dart';
import 'package:flutter/cupertino.dart';//引入Cupertino套件
void main() {
runApp(
const CupertinoApp(
title: 'Flutter Tutorial',
home: TutorialHome(),
),
);
}
class TutorialHome extends StatelessWidget {
const TutorialHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
leading: CupertinoButton(
padding: EdgeInsets.zero,
onPressed: () {},
child: const Icon(CupertinoIcons.list_bullet),
),
middle: const Text('Example title'),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
CupertinoButton(
padding: EdgeInsets.zero,
onPressed: () {},
child: const Icon(CupertinoIcons.search),
),
CupertinoButton(
padding: EdgeInsets.zero,
onPressed: () {},
child: const Icon(CupertinoIcons.search),
),
],
),
),
child: Container(
color: CupertinoColors.white,
child: Column(
children: [
const Expanded(
child: Center(
child: Text(
'Hello, world!',
style: TextStyle(
color: CupertinoColors.black,
),
),
),
),
CupertinoButton(
onPressed: () {},
child: const Icon(CupertinoIcons.add),
),
],
),
),
);
}
}
Cupertino widgets使用範例
GestureDetector
,處理使用者進行觸摸、點擊、拖動等手勢事件,並使用onTop()
設定回傳的操作。onPressed()
,就是處理點擊時將相應的操作。在此範例中,我們用onTop()
設定當使用者點擊時,會輸出'MyButton was tapped!'文字到終端機中
import 'package:flutter/material.dart';
class MyButton extends StatelessWidget {
const MyButton({super.key});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () { //點擊時,在終端機輸出文字
print('MyButton was tapped!');
},
child: Container(
height: 50,
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.lightGreen[500],
),
child: const Center(
child: Text('Engage'),
),
),
);
}
}
void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: Center(
child: MyButton(),
),
),
),
);
}
左邊是終端機畫面,右邊是頁面畫面,此為按下五次按鈕後的樣子