当前位置：首页 > wzjs >正文

网站开发模块网页设计框架

wzjs 2025/7/26 8:41:59

网站开发模块,网页设计框架,郑州市房产信息网官方网站,wordpress建站公司Flutter应用开发入门指南第一步：创建Flutter应用创建一个默认的Flutter应用后，将以下代码复制到 lib/main.dart 中： import package:flutter/material.dart;//运行Flutter应用,创建了一个自己实现的Widget对象 void main() > runApp(…

Flutter应用开发入门指南

第一步：创建Flutter应用

创建一个默认的Flutter应用后，将以下代码复制到 lib/main.dart 中：

import 'package:flutter/material.dart';//运行Flutter应用,创建了一个自己实现的Widget对象
void main() => runApp(new MyApp());//实现的Widget类
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Welcome to Flutter',home: new Scaffold(appBar: new AppBar(title: new Text('Welcome to Flutter'),//AppBar的title),body: new Center(child: new Text('Hello World'),//屏幕中间的文字),),);}
}

使用Android Studio的格式化快捷键可以让代码更加整洁。代码被复制进Android Studio之后，会自动添加一些注释，我们可以更清晰地看到其结构。

运行新建的应用后，界面会显示一个简单的"Hello World"文字。

官方给出的代码分析如下：

本示例创建一个Material APP。Material是一种标准的移动端和web端的视觉设计语言。Flutter提供了一套丰富的Material widgets。
main函数使用了(=>)符号，这是Dart中单行函数或方法的简写。
该应用程序继承了StatelessWidget，这将会使应用本身也成为一个widget。在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)
Scaffold是Material library中提供的一个widget，它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。
widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。
本示例中的body的widget树中包含了一个Center widget，Center widget又包含一个Text子widget。Center widget可以将其子widget树对其到屏幕中心。

第二步：使用外部包(package)

在这一步中，我们将使用一个名为english_words的开源软件包，其中包含数千个最常用的英文单词以及一些实用功能。

pubspec文件管理Flutter应用程序的assets(资源，如图片、package等)。在pubspec.yaml中，将english_words（3.1.0或更高版本）添加到依赖项列表。
在Android Studio的编辑器视图中查看pubspec时，单击右上角的Packages get，这会将依赖包安装到您的项目。
如果遇到"Waiting for another flutter command to release the startup lock…"问题，可以删除flutter/bin/cache/lockfile文件解决。
在lib/main.dart中，引入english_words：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

使用English words包生成文本来替换字符串"Hello World"。

Tip: “驼峰命名法”(称为"upper camel case"或"Pascal case")，表示字符串中的每个单词（包括第一个单词）都以大写字母开头。所以，“uppercamelcase"变成"UpperCamelCase”

进行以下更改：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {final wordPair = new WordPair.random();//获取WordPair对象return new MaterialApp(title: 'Welcome to Flutter',home: new Scaffold(appBar: new AppBar(title: new Text('Welcome to Flutter'),),body: new Center(child: new Text(wordPair.asPascalCase),//使用WordPair对象生成文本),),);}
}

如果应用程序正在运行，请使用热重载按钮(lightning bolt icon)更新正在运行的应用程序。每次单击热重载或保存项目时，都会在正在运行的应用程序中随机选择不同的单词对。这是因为单词对是在build方法内部生成的。每次MaterialApp需要渲染时或者在Flutter Inspector中切换平台时build都会运行。

第三步：添加一个有状态的部件（Stateful widget）

Stateless widgets是不可变的，这意味着它们的属性不能改变-所有的值都是最终的。

Stateful widgets持有的状态可能在widget生命周期中发生变化。实现一个stateful widget至少需要两个类：

一个StatefulWidget类。
一个State类。StatefulWidget类本身是不变的，但是State类在widget生命周期中始终存在。

在这一步中，您将添加一个有状态的widget-RandomWords，它创建其State类RandomWordsState。State类将最终为widget维护文本的变化。

封装一个Widget，将文本的获取转移到Widget中进行：

class RandomWordsWidget extends StatefulWidget {@overridecreateState() => new RandomWordsStatus();
}class RandomWordsStatus extends State<RandomWordsWidget> {@overrideWidget build(BuildContext context) {final wordPair = new WordPair.random();return new Text(wordPair.asPascalCase);}
}

使用封装好的Widget替换原来用来显示文字的Text：

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Welcome to Flutter',home: new Scaffold(appBar: new AppBar(title: new Text('Welcome to Flutter'),),body: new Center(child: new RandomWordsWidget(),),),);}
}