Flutter框架解决盒约束widget和assets里加载资产技术
作者：黎燃
盒约束
flutter:
assets:
- assets/my_icon.png
- assets/background.png
在Flutter中，小部件由其底层RenderBox对象渲染。渲染框受其父对象的约束，并在这些约束下调整自身大小。约束包括最小宽度、最大宽度和高度；尺寸由特定的宽度和高度组成。 通常，根据小部件如何处理其约束，有三种类型的框： 尽可能大。例如，“Center”和“ListView”的渲染框 遵循子部件的大小。例如，“变换”和“不透明度”渲染框。 指定尺寸。例如，图像和文本的渲染框 一些小部件（如Container）将根据构造函数参数而变化。默认情况下，容器占用尽可能多的空间，但如果为其指定宽度，它将采用指定的值。
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/config.json');
}
其他，如行和列（弹性框），将根据给它们的约束而变化，如下面的“flex”部分所述。 这些约束有时是“紧”的，这意味着它们不会为渲染框留出空间来确定其自身的大小（例如，如果最小宽度和最大宽度相同，即宽度很窄）。主要示例是App小部件，它是RenderView类中包含的一个小部件：应用程序构建函数返回的子小部件的渲染框被分配了一个约束，迫使它精确地填充应用程序的内容区域（通常是整个屏幕）。Flutter中的许多框，特别是那些只包含一个子控件的框，会将其约束传递给其子控件。这意味着，如果在应用程序渲染树的根处嵌套一些框，则所有子节点都受这些渲染框的约束。 有些框是放松的，有“最大”约束，但没有“最小”约束。例如，中心。
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是最常用的文本输入小部件 默认情况下，TextField具有下划线装饰。通过将InputDecoration设置为装饰属性，可以添加标签、图标、提示文本和错误文本。要完全删除装饰（包括下划线和为标签保留的空间），请将装饰明确设置为空白。
TextFormField包装一个TextField并将其集成到表单中。需要提供一个验证函数来检查用户的输入是否满足某些限制（例如，电话号码），或者在希望将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
资产部分的颤振部分指定应用程序中应包含的文件。每个资产都由相对于pubspec.yaml文件位置的显式路径标识。资产的申报顺序无关紧要。资产的实际目录可以是任何文件夹（本例中为资产）。 在构建过程中，Flutter将资产放在一个称为资产包的特殊归档中，应用程序可以在运行时读取该归档。 资产变体 构建过程支持资产变体的概念：不同版本的资产可以在不同的上下文中显示。当在pubspec.yaml的assets部分中指定资产路径时，在构建过程中，将在相邻子目录中找到任何同名文件。然后，这些文件将与指定的资产一起包含在资产包中。
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/config.json');
}
加载资产
应用程序可以通过AssetBundle对象访问其资产。 有两种主要方法允许从资产包加载字符串/文本（loadString）或图像/二进制（load）。 加载文本资源 每个Flutter应用程序都有一个rootBundle对象，可以轻松访问主资源包。可以直接使用包中的全局静态rootBundle对象：flutter/services。部件以加载资产。
但是，建议使用DefaultAssetBundle获取当前BuildContext的AssetBundle。此方法不使用应用程序构建的默认资产捆绑包，但允许父小部件在运行时替换不同的资产捆绑包（这对于本地化或测试场景非常有用）。
new AssetImage('icons/heart.png', package: 'my_icons')
通常，可以使用DefaultAssetBundle。of（）从应用程序运行时加载资产（如JSON文件）。 可以使用rootBundle直接在Widget上下文外加载这些资产，或者当AssetBundle的句柄不可用时，
Widget build(BuildContext context) {
// ...
return new DecoratedBox(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('graphics/background.png'),
// ...
),
// ...
),
);
// ...
}以上就是Flutter框架解决盒约束widget和assets里加载资产技术的详细内容，更多关于Flutter解决盒约束widget assets的资料请关注脚本之家其它相关文章！