網(wǎng)站首頁 編程語言 正文
Flutter
Flutter是谷歌的移動UI框架,可以在IOS和Android上快速構(gòu)建高質(zhì)量的本地用戶界面。Flutter可以使用現(xiàn)有代碼。
在世界上,F(xiàn)lutter正被越來越多的開發(fā)人員和組織使用,F(xiàn)lutter是完全免費(fèi)和開源的。這也是構(gòu)建未來Google Fuchsia應(yīng)用程序的主要方式。
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
runApp函數(shù)接受給定的小部件,并使其成為小部件樹的根。在本例中,小部件樹由兩個小部件組成:Center(及其子小部件)和Text。框架強(qiáng)制根小部件覆蓋整個屏幕,這意味著文本“Hello,world”將位于屏幕中心。需要在text實(shí)例中指定文本顯示的方向。使用MaterialApp時,將自動設(shè)置文本方向,稍后將進(jìn)行演示。 編寫應(yīng)用程序時,通常會創(chuàng)建新的小部件。這些小部件是無狀態(tài)無狀態(tài)小部件或有狀態(tài)有狀態(tài)小部件。具體選擇取決于小部件是否需要管理某些狀態(tài)。小部件的主要工作是實(shí)現(xiàn)一個構(gòu)建函數(shù)來構(gòu)建自己。小部件通常由一些較低級別的小部件組成。Flutter框架將依次構(gòu)建這些小部件,直到構(gòu)建最低級別的子小部件。這些最低級別的小部件通常是RenderObject,它將計(jì)算和描述小部件的幾何結(jié)構(gòu)。
Material
Flutter提供了許多小部件來幫助構(gòu)建遵循Material Design的應(yīng)用程序。Material應(yīng)用程序從MaterialApp小部件開始,它在應(yīng)用程序的根位置創(chuàng)建一些有用的小部件,包括一個Navigator,它管理由字符串標(biāo)識的小部件堆棧(即頁面路由堆棧)。導(dǎo)航器允許應(yīng)用程序在頁面之間平滑過渡。是否使用MaterialApp是完全可選的,但使用它是一個很好的做法。 Scaffold是Material中主要的布局組件.
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
home: new TutorialHome(),
));
}
class TutorialHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: new Text('Example title'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
body: new Center(
child: new Text('Hello, world!'),
),
floatingActionButton: new FloatingActionButton(
tooltip: 'Add', // used by assistive technologies
child: new Icon(Icons.add),
onPressed: null,
),
);
}
}
更完整的示例
讓我們考慮一個更完整的示例,它將上面介紹的概念結(jié)合在一起。讓我們假設(shè)一個顯示各種待售產(chǎn)品并維護(hù)購物車的購物應(yīng)用程序。讓我們先定義ShoppingListItem:
class Product {
const Product({this.name});
final String name;
}
typedef void CartChangedCallback(Product product, bool inCart);
class ShoppingListItem extends StatelessWidget {
ShoppingListItem({Product product, this.inCart, this.onCartChanged})
: product = product,
super(key: new ObjectKey(product));
final Product product;
final bool inCart;
final CartChangedCallback onCartChanged;
Color _getColor(BuildContext context) {
return inCart ? Colors.black54 : Theme.of(context).primaryColor;
}
TextStyle _getTextStyle(BuildContext context) {
if (!inCart) return null;
return new TextStyle(
color: Colors.black54,
decoration: TextDecoration.lineThrough,
);
}
@override
Widget build(BuildContext context) {
return new ListTile(
onTap: () {
onCartChanged(product, !inCart);
},
leading: new CircleAvatar(
backgroundColor: _getColor(context),
child: new Text(product.name[0]),
),
title: new Text(product.name, style: _getTextStyle(context)),
);
}
}
ShoppingListItem小部件是無狀態(tài)的。它將在構(gòu)造函數(shù)中接收的值存儲在最終成員變量中,然后在構(gòu)建函數(shù)中使用它們。例如,inCart布爾值表示在兩種視覺呈現(xiàn)效果之間切換:一種使用當(dāng)前主題的主色,另一種使用灰色。 當(dāng)用戶單擊列表項(xiàng)時,小部件不會直接修改其inCart值。相反,小部件將調(diào)用其父小部件賦予它的onCartChanged回調(diào)函數(shù)。此模式允許在小部件層次結(jié)構(gòu)中存儲更高的狀態(tài),從而使?fàn)顟B(tài)持續(xù)更長時間。在極端情況下,存儲并傳遞給runApp應(yīng)用程序的小部件的狀態(tài)將持續(xù)整個生命周期。 當(dāng)父項(xiàng)收到onCartChanged回調(diào)時,父項(xiàng)將更新其內(nèi)部狀態(tài),這將觸發(fā)父項(xiàng)使用新的inCart值重新生成ShoppingListItem的新實(shí)例。盡管父ShoppingListItem在重建時創(chuàng)建了一個新實(shí)例,但操作成本很低,因?yàn)镕lutter框架會將新構(gòu)建的小部件與先前構(gòu)建的小組件進(jìn)行比較,并且只將差異應(yīng)用于底層RenderObject。
Key
可以使用該鍵控制在重新構(gòu)建小部件時框架將匹配哪些其他小部件。默認(rèn)情況下,框架根據(jù)其runtimeType和顯示順序進(jìn)行匹配。當(dāng)使用鍵時,框架要求兩個小部件具有相同的鍵和runtimeType。 鍵對于構(gòu)建相同類型的小部件的多個實(shí)例非常有用。例如,ShoppingList構(gòu)建了足夠的ShoppingListItem實(shí)例來填充其可見區(qū)域: 如果沒有密鑰,則當(dāng)前生成中的第一個項(xiàng)將始終與上一個生成中的首個項(xiàng)同步。即使在語義上,如果列表中的第一個項(xiàng)目滾動到屏幕外,它在窗口中也不再可見。 通過將列表中的每個項(xiàng)目指定為“語義”鍵,無限列表可以更有效,因?yàn)榭蚣軐⑹鬼?xiàng)目與匹配的語義鍵同步,從而具有相似(或相同)的視覺外觀。此外,語義同步條目意味著在有狀態(tài)的子窗口小部件中,保留狀態(tài)將附加到相同的語義條目,而不是附加到相同編號位置的條目。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget titleSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Row(
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Text(
'Oeschinen Lake Campground',
style: new TextStyle(
fontWeight: FontWeight.bold,
),
),
),
new Text(
'Kandersteg, Switzerland',
style: new TextStyle(
color: Colors.grey[500],
),
),
],
),
),
new Icon(
Icons.star,
color: Colors.red[500],
),
new Text('41'),
],
),
);
//...
}
將第一行文本放入容器,然后在底部添加8個像素。列中的第二個子項(xiàng)(也是文本)顯示為灰色。 標(biāo)題行中的最后兩項(xiàng)是紅星圖標(biāo)和文本“41”。將整行放在容器中,沿每條邊填充32個像素
原文鏈接:https://juejin.cn/post/7178507074089779237
相關(guān)推薦
- 2022-01-28 mybatis事務(wù)DefaultSqlSession-策略模式
- 2022-05-11 SpringBoot jackson返回值中含有null的解決辦法
- 2023-04-18 GO語言字符串常用操作小結(jié)_Golang
- 2023-08-30 Linux下查找和刪除7天以前的文件
- 2022-10-11 Tomcat 9.x啟動時控制臺亂碼
- 2022-12-23 Android中Intent與Bundle的使用詳解_Android
- 2022-07-26 ubuntu18.04+cuda10.2+tensorrt8.4.1.5配置安裝
- 2022-05-24 一起來學(xué)習(xí)C語言的輸入和輸出_C 語言
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支