写一个flutter程序

这一部分我们写一个简单应用
功能是,为一个创业公司生成建议的公司名称。
用户可以选择和取消选择的名称,保存喜欢的名称。
该代码一次生成十个名称
用户滚动时,生成新一批名称。

着重体验以下几点

  1. Flutter如何在Android、iOS、桌面和web里自动适应不同的UI体系
  2. Flutter工程/项目的基本结构
  3. 查找和使用packages来扩展功能
  4. 使用热重载(hot reload)加快开发周期
  5. 如何实现有状态的widget
  6. 如何创建一个无限的、延迟加载的列表

替换掉lib/main.dart中的内容

import 'package:flutter/material.dart';
void main(List<String> args) {
 runApp(const MyApp()); 
}
class MyApp extends StatelessWidget{
 const MyApp({super.key});
 
 @override
 Widget build(BuildContext context){
 return MaterialApp(
 title: 'Welcome to Flutter',
 home: Scaffold(
 appBar: AppBar(
 title: const Text('Welcome to Flutter--appBar'),
 ),
 body: const Center(
 child: Text('Hello World'),
 ),
 ),
 );
 }
}

运行效果:

使用外部package

在这一步我们初步了解项目目录中的pubspec.yaml文件的作用
pubspec.yaml管理着Flutter工程中所有的资源和依赖

  1. 通过命令行的方式将包 english_words这个package加入到你的工程,在控制台会输出以下信息

    依赖关系的获取会自动生成pubspec.lock文件,包含所有加入项目的package和版本号信息

更新main.dart的代码

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main(List<String> args) {
 runApp(const MyApp()); 
}
class MyApp extends StatelessWidget{
 const MyApp({super.key});
 
 @override
 Widget build(BuildContext context){
 final wordPair = WordPair.random();
 return MaterialApp(
 title: 'Welcome to Flutter',
 home: Scaffold(
 appBar: AppBar(
 title: const Text('Welcome to Flutter--appBar'),
 ),
 body: Center(
 child: Text(wordPair.asPascalCase),
 ),
 ),
 );
 }
}

如果没有关闭运行程序,直接进行热重载,关闭程序的,重新运行
效果如图

每次热重载都能看见程序中间的单词改变

添加一个Stateful widget

状态的widgets是不可变的,这意味着他们的属性是不能改变的--所有的值都是final
Dart中的关键字 final有什么作用?
状态的widgets也是不可变的,但其持有的状态可能在widget生命周期中发生变化,实现一个有状态的widget至少需要两个类

  1. 一个StatefulWidget类
  2. 一个State类,StatefulWidget类本身是不变的,但State类在widget生命周期中始终存在
    在这一步,你将添加一个有状态的widget---RandomWords,它会创建自己的状态类--- _RandomWordState,然后你需要将RandomWords内嵌到
    已有的无状态MyApp Widget
    也就是说,想要一个有状态变化的widget需要两个类1.StatefulWidget类---状态不变2.一个State类--状态类
    然后只需要将有状态的widget内嵌到无状态的MyApp widget中,就可以体现出状态的改变
    修改lib/main.dart

    import 'package:flutter/material.dart';
    import 'package:english_words/english_words.dart';
    void main(List<String> args) {
     runApp(const MyApp()); 
    }
    class MyApp extends StatelessWidget{
     const MyApp({super.key});
     
     @override
     Widget build(BuildContext context){
     return MaterialApp(
     title: 'Startup Name Generator',
     home: Scaffold(
     appBar: AppBar(
     title: const Text('Startup Name Generator'),
     ),
     body: Center(
     child: RandomWords(),
     ),
     ),
     );
     }
    }
    class RandomWords extends StatefulWidget {
     const RandomWords({super.key});
     @override
     State<RandomWords> createState() => _RandomWordsState();
    }
    class _RandomWordsState extends State<RandomWords> {
     final _suggesttions = <WordPair>[]; //保存建议的单词对
     final _biggerFont = const TextStyle(fontSize: 18);
     @override
     Widget build(BuildContext context) {
     return ListView.builder(
     padding: const EdgeInsets.all(16.0),
     itemBuilder: (context,i) {
     if(i.isOdd) return const Divider();
     final index = i~/2;
     if(index >= _suggesttions.length){
     _suggesttions.addAll(generateWordPairs().take(10));
     }
     return ListTile(
     title: Text(
     _suggesttions[index].asPascalCase,
     style: _biggerFont,
     ),
     );
     },
     );
     }
    }


    然后还有一个难点就是需要体会Dart的语法,类似于匿名函数的写法
    Widget是Flutter里的核心类,在Flutter中最核心的是用widgets构建UI界面
    widgets是描述一个UI元素的长相及当前的配置与状态。
    当widgets的状态改变后,widgets将重构他的描述,框架会与前一个描述做比对,对渲染树从前一个状态到当前的状态做出的最小的改变。

作者:乐码客原文地址:https://segmentfault.com/a/1190000042972099

%s 个评论

要回复文章请先登录注册