解决盒约束、widget和assets里的加载资产技术在Flutter框架运用的方案【Flutter高级技术】

简介: 解决盒约束、widget和assets里的加载资产技术在Flutter框架运用的方案【Flutter高级技术】

盒约束

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'),
        // ...
      ),
      // ...
    ),
  );
  // ...
}
相关文章
|
1月前
|
设计模式 前端开发 测试技术
Flutter 项目架构技术指南
探讨Flutter项目代码组织架构的关键方面和建议。了解设计原则SOLID、Clean Architecture,以及架构模式MVC、MVP、MVVM,如何有机结合使用,打造优秀的应用架构。
Flutter 项目架构技术指南
|
3月前
|
监控 Dart 安全
创建一个Dart应用,监控局域网上网记录的软件:Flutter框架的应用
在当今数字时代,网络安全变得愈发重要。为了监控局域网上的上网记录,我们可以借助Flutter框架创建一个强大的Dart应用。在这篇文章中,我们将深入讨论如何使用Flutter框架开发这样一个监控局域网上网记录的软件,并提供一些实用的代码示例。
275 1
|
3月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
344 0
|
1天前
|
开发框架 Android开发 开发者
构建未来:使用Flutter框架开发跨平台移动应用
【4月更文挑战第24天】 在移动应用的世界中,Android和iOS一直占据主导地位。然而,开发者经常面临一个难题:如何高效地为这两个平台构建和维护应用。传统的解决方案是分别为每个平台编写和维护独立的代码库,这不仅耗时且低效,还增加了开发成本。本文将深入探讨如何使用Google的Flutter框架来构建高性能、美观且能够在Android和iOS上无缝运行的跨平台移动应用。通过分析Flutter的架构、核心组件以及开发优势,我们将了解为何Flutter成为当今市场上最具潜力的跨平台解决方案。
|
1天前
|
机器学习/深度学习 人工智能 Dart
移动应用的未来之路:Flutter框架与跨平台开发
【4月更文挑战第24天】 在移动应用的世界中,快速迭代和跨平台兼容性是成功的关键。Google推出的开源UI工具包——Flutter,以其高性能、美观的界面和一次编码多平台部署的特性,正成为开发者的新宠。本文将深入探讨Flutter框架如何简化移动应用开发流程,以及它如何优化移动操作系统上的用户体验。同时,文章还将剖析Flutter在当前移动应用生态系统中的地位及其对未来发展的启示。
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
2月前
|
开发框架 开发者 UED
跨平台开发框架Flutter在移动应用开发中的应用与前景
【2月更文挑战第3天】本文将探讨跨平台开发框架Flutter在移动应用开发中的应用价值和未来发展前景。通过分析Flutter的特点和优势,以及其在实际项目中的应用案例,展示了Flutter在提升开发效率、降低成本、增强用户体验等方面的优势。同时,对Flutter在未来移动应用开发领域的发展趋势进行了展望,指出了其在日益激烈的市场竞争中的巨大潜力。
|
3月前
|
Linux 开发者 iOS开发
Flutter笔记:桌面端应用多窗口管理方案
Flutter笔记:桌面端应用多窗口管理方案
119 0
|
3月前
|
UED
flutter笔记:骨架化加载器
flutter笔记:骨架化加载器
127 0
|
3月前
flutter中使用图标(含自制图标库方案)
flutter中使用图标(含自制图标库方案)
138 0