源码地址：GitHub - hhbbeijing/flutter_app_test? ?提交日期：2022-5-7
Flutter 应用程序包含代码和 assets（也为资源）。资源是被打包到应用程序安装包中，可以在运行时访问的一种文件。常见的资源类型包括静态数据（例如 JSON 文件），配置文件，图标和图片。
分为两部分讲解，图片加载、JSON文件加载。
一、说明
写在前面，介绍一下前例提到的构造函数：
const PageA({Key? key}) : super(key: key);1.1 key:key? ? ? ?
冒号：赋值的意思。
super代表实现父类的构造函数，查看源码得知父类有参数 key（即第一个key），完整的含义是：实现父类的构造函数，并肩key的值传给参数key。
/// Initializes [key] for subclasses.
const Widget({ this.key });1.2 空安全
通过在类型后加上问号 (?) 将类型声明为可空。例如，int? 类型的变量可以是整形数字或 null。如果你 明确知道 一个表达式不会为空，但 Dart 不这么认为时，你可以在表达式后添加 ! 来断言表达式不为空（为空时将抛出异常）。例如：int x = nullableButNotNullInt!
1.3 大括号
大括号之内的是选填参数，可以不填，不填为空。
super前的冒号是一个初始化器。这意味着初始化器在构造函数体之前执行。
PageA({Key? key}) 完整的解释：定义一个名为 PageA 的构造函数，选填参数为可空的Key，构造函数运行前先实现其父类构造函数。
更多语法请参考，一定要认真读完，方便以后编码：Language tour | Dart
例如常用的，try`catch、assert等，给一个示例：
var age;
var age19 = 19;
try{
assert(age == 19,"age is not 19!");
} on AssertionError catch(e,s){
print(e.message.toString());
print(s.toString());
} catch(e){
print(e.toString());
}二、图片加载
图片小部件有 Icon、Image两类。
2.1 Icon
Icon是用于展示方形的MaterialApp?风格的小部件。不适用UI设计师做的图片。
IconButton 是带有交互式（例如点击事件）的小部件，IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。
import 'package:flutter/material.dart';
void main() {
runApp(Main());
}
class Main extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage());
}
}
class MainPage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MainPage> { // This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page Main'),
),
body:Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.message,
color: Colors.red,
size: 30,
semanticLabel: 'Text to announce in accessibility modes',
),
IconButton(
onPressed: (){
print('IconButton pressed!');
},
icon: Icon(Icons.add)
),
],
),
)
);
}
}2.2?Image
Image同样有两种加载本地图片的方式。也有两种加载网络图片的方式。
import 'package:flutter/material.dart';
void main() {
runApp(Main());
}
class Main extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage());
}
}
class MainPage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MainPage> { // This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page Main'),
),
body:Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.message,
color: Colors.red,
size: 30,
semanticLabel: 'Text to announce in accessibility modes',
),
IconButton(
onPressed: (){
print('IconButton pressed!');
},
icon: Icon(Icons.add)
),
Image(
image: AssetImage('assets/images/ic_launcher.png'),
width: 30,
height: 30,
),
Image.asset("assets/images/ic_launcher.png",width: 60,height: 60),
Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',width: 70,height: 70),
Image(image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),width: 80,height: 80),
],
),
)
);
}
}2.3 Button
TextButton,?ElevatedButton, 和?OutlinedButton，三者均继承自?ButtonStyleButton，这3个按钮的用法和属性完全相同，将外观属性集合为一个?ButtonStyle，非常方便统一控制。
ElevatedButton 即"漂浮"按钮，它默认带有阴影和灰色背景；
TextButton即文本按钮，默认背景透明并不带阴影，按下后，会有背景色；
OutlinedButton本质上是一个带有轮廓的TextButton，默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)；
import 'package:flutter/material.dart';
void main() {
runApp(Main());
}
class Main extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: MainPage());
}
}
class MainPage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MainPage> {
// This widget is the root of your application.
final ButtonStyle style =
ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page Main'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.message,
color: Colors.red,
size: 30,
semanticLabel: 'Text to announce in accessibility modes',
),
IconButton(
onPressed: () {
print('IconButton pressed!');
},
icon: Icon(Icons.add)),
const Image(
image: AssetImage('assets/images/ic_launcher.png'),
width: 30,
height: 30,
),
Image.asset("assets/images/ic_launcher.png",
width: 60, height: 60),
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
width: 70,
height: 70),
const Image(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
width: 80,
height: 80),
TextButton(
onPressed: () {
print('textButton');
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Image(
image: AssetImage('assets/images/dialog_button_bg.png'),
width: 40,
height: 40,
),
Text('按钮')
],
),
style: ButtonStyle(
textStyle: MaterialStateProperty.all(TextStyle(
color: Colors.green,
fontSize: 20,
)),
backgroundColor: MaterialStateColor.resolveWith(
(states) => Colors.transparent),
minimumSize: MaterialStateProperty.resolveWith(
(states) => Size(40, 40)),
padding: MaterialStateProperty.resolveWith(
(states) => EdgeInsets.zero))
),
ElevatedButton(
style: style,
onPressed: null,
child: const Text('Disabled'),
),
OutlinedButton(
onPressed: () {
debugPrint('Received click');
},
child: const Text('Click Me'),
)
],
),
));
}
}
三、加载文本 assets
每个 Flutter 应用程序都有一个?rootBundle?对象，可以轻松访问主资源 bundle 。还可以直接使用?package:flutter/services.dart?中全局静态的?rootBundle?来加载资源。
添加JSON文件：
配置：
解析：
import 'dart:convert';//引入json解析
import 'package:flutter/services.dart' show rootBundle;//使用?rootBundle.loadString的方式获取本地 json 文件
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
void main() {
runApp(Main());
}
class Main extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: MainPage());
}
}
class MainPage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MainPage> {
var _result;
@override
void initState() {
rootBundle.loadString("assets/config.json").then((value) {
print(value);
_result = json.decode(value); // 赋值
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page Main'),
),
body: Center(
child: IconButton(
onPressed: () {
print(_result);
},
icon: Icon(Icons.add)),
));
}
}
