flutter(2)-第一个页面

下班了,学习
了解完前面说的基本概念以后,我们开始写一个简单的页面吧 感觉这篇写的挺详细的,希望人类们都能看懂
首先看一下flutter项目的基本结构
MaterialApp：MaterialApp是Flutter提供的一个用于构建Material Design风格应用程序的Widget。它是一个包含了许多常用功能的高级Widget，可以简化应用程序的开发过程。在调用runApp方法时，通常会将MaterialApp作为根节点的Widget传入。MaterialApp提供了一些常用的属性和方法，用于配置应用程序的主题、路由、本地化等。

简单入门
main函数是dart文件的入口,而lib里面的main.dart又是应用的入口文件,所以我们将文件写在这里 如果想要在Windows下运行这个项目,需要按照以下步骤:
1.打开Android studio(配置什么的自行搜索),将模拟设备启动
启动以后,在Android studio中或者vscode中都能运行,首先要进入main.dart文件中
2.运行
Android studio
vscode
或者直接按下F5
命令行
flutter run
现在我们在页面上写一个最简单的hello world吧
main.dart
import ‘package:flutter/material.dart’;
void main(List args) {
runApp(Text(‘hello world’, textDirection: TextDirection.ltr));
}
现在的效果:
解读
在上面的代码中,runApp是meterial库里面提供的方法,我们点进runApp里面,可以看到,他需要我们传入一个Widget类型的app,在flutter中,万物皆Widget

所以我们放一个文字试试,点进源码里可以看到,Text类继承自StatelessWidget类,而StatelessWidget类又继承自Widget,所以Text是可以作为Widget放到runApp里面的。
如果我们想知道Text是怎么使用的,我们需要根据代码提示来,里面的属性其实和前端里的其实差不多,只不过都是面向对象的形式
点进Text源码内,我们可以看到,data是个必传属性,是String类型的,而其他的,都是可选命名参数
或者我们直接把鼠标放上去,也可以看到我们能传什么参数
例如我们想写一个style,我们可以看到他接收的参数是一个TextStyle构造函数的实例(注意我们前面说过new可以省略)

打出TextStyle后再继续看提示
可以看到接受double类型的字号,那我们给一个字号试试
Text(
‘hello world’,
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 50),
)
大概就是这个样子了
但是我们现在的文字并不在页面居中,我们可以放一个Center
import ‘package:flutter/material.dart’;

void main(List args) {
runApp(Center(
child: Text(
‘hello world’,
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 50),
),
));
}

除此之外,我们可以使用MaterialApp这个Widget来写我们的页面元素,这样可以生成Material风格的页面
void main(List args) {
runApp(MaterialApp(
title: ‘hello?’,
home: Center(
child: Text(
‘hello world’,
style: TextStyle(color: Colors.orange, fontSize: 40),
),
),
));
}

但是我们知道,我们手机的app是有一个顶部的导航栏,底部有tabbar的,而不是像现在这样,所以我们要使用到一个叫scaffold的东西
import ‘package:flutter/material.dart’;

void main(List args) {
runApp(MaterialApp(
title: ‘hello?’,
home: Scaffold(
appBar: AppBar(
title: Text(‘我是标题’),
),
body: const Center(
child: Text(
‘hello world’,
textDirection: TxtDirection.ltr,
style: TextStyle(fontSize: 40, color: Colors.orange),
),
)),
));
}
关于上面的appBar,我们点进源码会发现,appBar是PreferredSizeWidget类型的

但是PreferredSizeWidget是抽象类,不能被实例化所以我们使用Appbar。可以看到Appbar是既继承自StatefulWidget又实现PreferredSizeWidget的
那现在我们就有一个基本页面啦