Flutter框架解決盒約束widget和assets里加載資產(chǎn)技術(shù)
盒約束
flutter:
assets:
- assets/my_icon.png
- assets/background.png
在Flutter中,小部件由其底層RenderBox對象渲染。渲染框受其父對象的約束,并在這些約束下調(diào)整自身大小。約束包括最小寬度、最大寬度和高度;尺寸由特定的寬度和高度組成。 通常,根據(jù)小部件如何處理其約束,有三種類型的框: 盡可能大。例如,“Center”和“ListView”的渲染框 遵循子部件的大小。例如,“變換”和“不透明度”渲染框。 指定尺寸。例如,圖像和文本的渲染框 一些小部件(如Container)將根據(jù)構(gòu)造函數(shù)參數(shù)而變化。默認(rèn)情況下,容器占用盡可能多的空間,但如果為其指定寬度,它將采用指定的值。
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/config.json');
}
其他,如行和列(彈性框),將根據(jù)給它們的約束而變化,如下面的“flex”部分所述。 這些約束有時是“緊”的,這意味著它們不會為渲染框留出空間來確定其自身的大?。ɡ纾绻钚挾群妥畲髮挾认嗤?,即寬度很窄)。主要示例是App小部件,它是RenderView類中包含的一個小部件:應(yīng)用程序構(gòu)建函數(shù)返回的子小部件的渲染框被分配了一個約束,迫使它精確地填充應(yīng)用程序的內(nèi)容區(qū)域(通常是整個屏幕)。Flutter中的許多框,特別是那些只包含一個子控件的框,會將其約束傳遞給其子控件。這意味著,如果在應(yīng)用程序渲染樹的根處嵌套一些框,則所有子節(jié)點(diǎn)都受這些渲染框的約束。 有些框是放松的,有“最大”約束,但沒有“最小”約束。例如,中心。
new AssetImage('icons/heart.png', package: 'my_icons')
文本輸入widget
class ExampleWidget extends StatefulWidget {
ExampleWidget({Key key}) : super(key: key);
@override
_ExampleWidgetState createState() => new _ExampleWidgetState();
}
TextField是最常用的文本輸入小部件 默認(rèn)情況下,TextField具有下劃線裝飾。通過將InputDecoration設(shè)置為裝飾屬性,可以添加標(biāo)簽、圖標(biāo)、提示文本和錯誤文本。要完全刪除裝飾(包括下劃線和為標(biāo)簽保留的空間),請將裝飾明確設(shè)置為空白。
TextFormField包裝一個TextField并將其集成到表單中。需要提供一個驗(yàn)證函數(shù)來檢查用戶的輸入是否滿足某些限制(例如,電話號碼),或者在希望將TextField與其他FormField集成時使用TextFormField。
class _ExampleWidgetState extends State<ExampleWidget> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
controller: _controller,
decoration: new InputDecoration(
hintText: 'Type something',
),
),
new RaisedButton(
onPressed: () {
showDialog(
context: context,
child: new AlertDialog(
title: new Text('What you typed'),
content: new Text(_controller.text),
),
);
},
child: new Text('DONE'),
),
],
);
}
}
assets
資產(chǎn)部分的顫振部分指定應(yīng)用程序中應(yīng)包含的文件。每個資產(chǎn)都由相對于pubspec.yaml文件位置的顯式路徑標(biāo)識。資產(chǎn)的申報(bào)順序無關(guān)緊要。資產(chǎn)的實(shí)際目錄可以是任何文件夾(本例中為資產(chǎn))。 在構(gòu)建過程中,F(xiàn)lutter將資產(chǎn)放在一個稱為資產(chǎn)包的特殊歸檔中,應(yīng)用程序可以在運(yùn)行時讀取該歸檔。 資產(chǎn)變體 構(gòu)建過程支持資產(chǎn)變體的概念:不同版本的資產(chǎn)可以在不同的上下文中顯示。當(dāng)在pubspec.yaml的assets部分中指定資產(chǎn)路徑時,在構(gòu)建過程中,將在相鄰子目錄中找到任何同名文件。然后,這些文件將與指定的資產(chǎn)一起包含在資產(chǎn)包中。
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/config.json');
}
加載資產(chǎn)
應(yīng)用程序可以通過AssetBundle對象訪問其資產(chǎn)。 有兩種主要方法允許從資產(chǎn)包加載字符串/文本(loadString)或圖像/二進(jìn)制(load)。 加載文本資源 每個Flutter應(yīng)用程序都有一個rootBundle對象,可以輕松訪問主資源包??梢灾苯邮褂冒械娜朱o態(tài)rootBundle對象:flutter/services。部件以加載資產(chǎn)。
但是,建議使用DefaultAssetBundle獲取當(dāng)前BuildContext的AssetBundle。此方法不使用應(yīng)用程序構(gòu)建的默認(rèn)資產(chǎn)捆綁包,但允許父小部件在運(yùn)行時替換不同的資產(chǎn)捆綁包(這對于本地化或測試場景非常有用)。
new AssetImage('icons/heart.png', package: 'my_icons')
通常,可以使用DefaultAssetBundle。of()從應(yīng)用程序運(yùn)行時加載資產(chǎn)(如JSON文件)。 可以使用rootBundle直接在Widget上下文外加載這些資產(chǎn),或者當(dāng)AssetBundle的句柄不可用時,
Widget build(BuildContext context) {
// ...
return new DecoratedBox(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('graphics/background.png'),
// ...
),
// ...
),
);
// ...
}以上就是Flutter框架解決盒約束widget和assets里加載資產(chǎn)技術(shù)的詳細(xì)內(nèi)容,更多關(guān)于Flutter解決盒約束widget assets的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android實(shí)現(xiàn)圖像灰度化、線性灰度變化和二值化處理方法
這篇文章主要介紹了Android實(shí)現(xiàn)圖像灰度化、線性灰度變化和二值化處理方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Android檢查手機(jī)網(wǎng)絡(luò)狀態(tài)及網(wǎng)絡(luò)類型的方法
這篇文章主要介紹了Android檢查手機(jī)網(wǎng)絡(luò)狀態(tài)及網(wǎng)絡(luò)類型的方法,涉及Android檢測手機(jī)網(wǎng)絡(luò)狀態(tài)的技巧,需要的朋友可以參考下2015-04-04
Android編程實(shí)現(xiàn)基于局域網(wǎng)udp廣播自動建立socket連接的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)基于局域網(wǎng)udp廣播自動建立socket連接的方法,涉及Android使用udp廣播實(shí)現(xiàn)socket通訊的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
Android刮刮卡實(shí)現(xiàn)原理與代碼講解
這篇文章主要為大家詳細(xì)介紹了Android刮刮卡實(shí)現(xiàn)原理、實(shí)現(xiàn)原理步驟以及代碼講解,感興趣的小伙伴們可以參考一下2016-04-04
安卓GET與POST網(wǎng)絡(luò)請求的三種方式
今天小編就為大家分享一篇關(guān)于安卓GET與POST網(wǎng)絡(luò)請求的三種方式,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2018-12-12

