盒約束

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”部分所述。 這些約束有時(shí)是“緊”的，這意味著它們不會為渲染框留出空間來確定其自身的大?。ɡ纾绻钚挾群妥畲髮挾认嗤?，即寬度很窄）。主要示例是App小部件，它是RenderView類中包含的一個(gè)小部件：應(yīng)用程序構(gòu)建函數(shù)返回的子小部件的渲染框被分配了一個(gè)約束，迫使它精確地填充應(yīng)用程序的內(nèi)容區(qū)域（通常是整個(gè)屏幕）。Flutter中的許多框，特別是那些只包含一個(gè)子控件的框，會將其約束傳遞給其子控件。這意味著，如果在應(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)、提示文本和錯(cuò)誤文本。要完全刪除裝飾（包括下劃線和為標(biāo)簽保留的空間），請將裝飾明確設(shè)置為空白。

TextFormField包裝一個(gè)TextField并將其集成到表單中。需要提供一個(gè)驗(yàn)證函數(shù)來檢查用戶的輸入是否滿足某些限制（例如，電話號碼），或者在希望將TextField與其他FormField集成時(shí)使用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)包含的文件。每個(gè)資產(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)放在一個(gè)稱為資產(chǎn)包的特殊歸檔中，應(yīng)用程序可以在運(yùn)行時(shí)讀取該歸檔。 資產(chǎn)變體 構(gòu)建過程支持資產(chǎn)變體的概念：不同版本的資產(chǎn)可以在不同的上下文中顯示。當(dāng)在pubspec.yaml的assets部分中指定資產(chǎn)路徑時(shí)，在構(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）。 加載文本資源 每個(gè)Flutter應(yīng)用程序都有一個(gè)rootBundle對象，可以輕松訪問主資源包?？梢灾苯邮褂冒械娜朱o態(tài)rootBundle對象：flutter/services。部件以加載資產(chǎn)。

但是，建議使用DefaultAssetBundle獲取當(dāng)前BuildContext的AssetBundle。此方法不使用應(yīng)用程序構(gòu)建的默認(rèn)資產(chǎn)捆綁包，但允許父小部件在運(yùn)行時(shí)替換不同的資產(chǎn)捆綁包（這對于本地化或測試場景非常有用）。

 new AssetImage('icons/heart.png', package: 'my_icons')

通常，可以使用DefaultAssetBundle。of（）從應(yīng)用程序運(yùn)行時(shí)加載資產(chǎn)（如JSON文件）。 可以使用rootBundle直接在Widget上下文外加載這些資產(chǎn)，或者當(dāng)AssetBundle的句柄不可用時(shí)，

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)文章！

最新評論