Skip to main content

moregeek program

解决盒约束、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'),
// ...
),
// ...
),
);
// ...
}

©著作权归作者所有:来自51CTO博客作者黎燃黎燃的原创作品,请联系作者获取转载授权,否则将追究法律责任

#yyds干货盘点# react笔记之学习之双向绑定-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群小结提交表单后如何清空表单中的旧数据 * 现在这种表单,在React我们称为非受控组件 * * 我们可

#yyds干货盘点# react笔记之学习之存储到一个state对象中-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群代码案列import React, {useState} from 'react';import Card from

angular 模块封装概念常见的错误理解-多极客编程

Angular 以类似于 ES 模块的方式引入了模块封装的概念。 它基本上意味着可声明的类型——组件、指令和管道——只能由在该模块内声明的组件使用。 例如,如果我尝试使用下面的代码在 App 模块的 App 组件内使用 A 模块中的 a-comp: @Component({ selector: 'my-app', template: ` Hello {{name}}

#yyds干货盘点# react笔记之学习之完成删除功能-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷代码案例LogItem.jsimport React, { useState, useEffect, useCallback, memo } from 'react';imp

#yyds干货盘点# react笔记之学习之完成添加功能-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群代码案例import React, {useState} from 'react';import Card from

#yyds干货盘点# react笔记之学习之空列表提示-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群log.js/* 日志的容器 */import LogItem from "./LogItem/LogItem";im

内科大机器学习框架课程重点内容笔记-多极客编程

一.背景 这是2020届内科大机器学习框架课程的考试复习内容 二.内容 1.变量间的相互关系: (1)确定性关系或函数关系:研究的是确定现象非随机变量间的关系。 (2)相关关系或统计依赖关系:研究的是非确定现象随机变量间的关系。 2.回归分析是研究一个变量关于另一个(些)变量的具体依赖关系。 收入是解释变量或自变量,消费是被解释变量或因变量。 注意:不线性相关并不意味着不相关;有相关关系并不意味着

#yyds干货盘点# react笔记之学习之双向绑定-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群小结提交表单后如何清空表单中的旧数据 * 现在这种表单,在React我们称为非受控组件 * * 我们可

#yyds干货盘点# react笔记之学习之存储到一个state对象中-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群代码案列import React, {useState} from 'react';import Card from

#yyds干货盘点# react笔记之学习之完成删除功能-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷代码案例LogItem.jsimport React, { useState, useEffect, useCallback, memo } from 'react';imp

#yyds干货盘点# react笔记之学习之完成添加功能-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群代码案例import React, {useState} from 'react';import Card from

知道了web的攻击方式,还不快防起来?-多极客编程

大家好,我是CoderBin 前言 本文总结了一些关于web攻击的几种方式(不代表全部)以及预防方法,希望大家的web之路能够"一路平安" 如果文中有不对、疑惑的地方,欢迎在评论区留言指正🌻 一、是什么 Web攻击(WebAttack)是针对用户上网行为或网站服务器等设备进行攻击的行为 如植入恶意代码,修改网站权限,获取网站用户隐私信息等等 Web应用程序的安全性是任何基于Web业务的重要组成部分