GitHub高星笔记:一份来自阿里大佬的Flutter学习分享!

这份博客介绍了如何从头开始学习Flutter,包括添加有状态部件、创建无限滚动ListView、添加交互、导航到新页面等步骤。作者详细解释了每个步骤的关键点,如使用StatefulWidget和State类,以及如何处理用户交互和实现导航。同时,提供了代码示例和解决问题的链接,非常适合初学者跟随实践。
摘要由CSDN通过智能技术生成

在您输入时,Android Studio会为您提供有关库导入的建议。然后它将呈现灰色的导入字符串,让您知道导入的库尚未使用(到目前为止)

4.使用 English words 包生成文本来替换字符串“Hello World”.

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

进行以下更改, 如高亮部分所示:

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

voidmain()=>runApp(newMyApp());

classMyAppextendsStatelessWidget{

@override

Widget build(BuildContext context){

final wordPair =new WordPair.random();

returnnewMaterialApp(

title:‘Welcome to Flutter’,

home:newScaffold(

appBar:newAppBar(

title:newText(‘Welcome to Flutter’),

),

body:newCenter(

//child: new Text(‘Hello World’),

child:newText(wordPair.asPascalCase),

),

),

);

}}

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

遇到问题?

如果您的应用程序运行不正常,请查找是否有拼写错误。如果需要,使用下面链接中的代码来对比更正。

· pubspec.yaml (The pubspec.yaml file won’t change again.)

· lib/main.dart

第3步: 添加一个有状态的部件(Stateful widget)

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

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

1.一个 StatefulWidget类。

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

在这一步中,您将添加一个有状态的widget-RandomWords,它创建其State类RandomWordsState。State类将最终为widget维护建议的和喜欢的单词对。

1.添加有状态的 RandomWords widget 到 main.dart。 它也可以在MyApp之外的文件的任何位置使用,但是本示例将它放到了文件的底部。RandomWords widget除了创建State类之外几乎没有其他任何东西

classRandomWordsextendsStatefulWidget{

@override

createState()=>newRandomWordsState();}

2.添加 RandomWordsState 类.该应用程序的大部分代码都在该类中, 该类持有RandomWords widget的状态。这个类将保存随着用户滚动而无限增长的生成的单词对, 以及喜欢的单词对,用户通过重复点击心形 ❤️ 图标来将它们从列表中添加或删除。

你会一步一步地建立这个类。首先,通过添加高亮显示的代码创建一个最小类

class RandomWordsState extends State{}

3.在添加状态类后,IDE会提示该类缺少build方法。接下来,您将添加一个基本的build方法,该方法通过将生成单词对的代码从MyApp移动到RandomWordsState来生成单词对。

将build方法添加到RandomWordState中,如下面高亮代码所示

classRandomWordsStateextendsState{

@override

Widget build(BuildContext context){

final wordPair =new WordPair.random();

returnnew Text(wordPair.asPascalCase);

}}

4.通过下面高亮显示的代码,将生成单词对代的码从MyApp移动到RandomWordsState中

classMyAppextendsStatelessWidget{

@override

Widget build(BuildContext context){

final wordPair =new WordPair.random();// 删除此行

returnnewMaterialApp(

title:‘Welcome to Fl

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值