150 lines
4.4 KiB
Markdown
150 lines
4.4 KiB
Markdown
---
|
||
title: Flutter初见
|
||
date: 2019-10-21 22:38:25
|
||
tags:
|
||
- flutter
|
||
- dart
|
||
categories:
|
||
- flutter
|
||
---
|
||
|
||
### 搭建开发环境
|
||
1. 下载解压Flutter的sdk，并且将其中的bin目录配置到环境变量
|
||
2. Android Studio安装安卓SDK，通常启动时如果未安装过都会自动执行下载安装
|
||
<!-- more -->
|
||
3. Android Studio安装Flutter的插件
|
||
|
||
安装flutter插件时会自动安装其依赖的dart插件
|
||
4. 在Android Studio的`AVD Manager`当中创建模拟器（需要选择屏幕尺寸以及安卓系统版本，当前系统中不存在的版本需要下载）
|
||
如果使用真机调试运行，该步骤可以跳过
|
||
|
||
|
||
执行`flutter doctor`可以检验当前环境当中存在的问题
|
||
|
||
可以看到IDEA也是支持的，但是我们不打算使用IDEA来进行开发，所以就不在IDEA当中安装插件了
|
||
No devices available代表还未启动虚拟机或者连接真机
|
||
其余几项都是校验通过的
|
||
|
||
### 创建flutter项目
|
||
当Android Studio的flutter插件安装无误之后，就可以创建flutter项目了
|
||
|
||
|
||
新建的是一个flutter的demo项目
|
||
包含一个标题栏，一个按钮，和中间区域内的若干文字
|
||
点击按钮时进行计数，文字会相应变化
|
||
|
||
|
||
项目当中包含一个main.dart文件
|
||
内容如下
|
||
```dart
|
||
// 引入material样式
|
||
import 'package:flutter/material.dart';
|
||
// 程序运行入口
|
||
void main() => runApp(MyApp());
|
||
|
||
// App实体类
|
||
class MyApp extends StatelessWidget {
|
||
// This widget is the root of your application.
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return MaterialApp(
|
||
title: 'Flutter Demo',
|
||
theme: ThemeData(
|
||
// 主题样式
|
||
primarySwatch: Colors.blue,
|
||
),
|
||
// 首页对象以及首页的标题
|
||
home: MyHomePage(title: 'Flutter Demo Home Page'),
|
||
);
|
||
}
|
||
}
|
||
|
||
class MyHomePage extends StatefulWidget {
|
||
MyHomePage({Key key, this.title}) : super(key: key);
|
||
|
||
final String title;
|
||
|
||
@override
|
||
_MyHomePageState createState() => _MyHomePageState();
|
||
}
|
||
|
||
class _MyHomePageState extends State<MyHomePage> {
|
||
int _counter = 0;
|
||
|
||
void _incrementCounter() {
|
||
setState(() { // 计数方法
|
||
_counter++;
|
||
});
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
appBar: AppBar(
|
||
// 标题栏
|
||
title: Text(widget.title),
|
||
),
|
||
body: Center( // 居中元素
|
||
// 子元素
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: <Widget>[
|
||
Text(
|
||
'You have pushed the button this many times:',
|
||
),
|
||
Text( // 文字元素以及样式
|
||
'$_counter',
|
||
style: Theme.of(context).textTheme.display1,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 浮动按钮
|
||
floatingActionButton: FloatingActionButton(
|
||
onPressed: _incrementCounter, // 点击事件
|
||
tooltip: 'Increment',
|
||
child: Icon(Icons.add), // 子元素是一个图标
|
||
),
|
||
);
|
||
}
|
||
}
|
||
```
|
||
以上代码当中构建对象都省略了new关键字
|
||
其中的每个对象都是一个组件（Widget）
|
||
|
||
### 常用组件
|
||
组件以及组件的一些属性，基本算是前端html和css的思想
|
||
|
||
#### Text组件
|
||
这是一个文本组件，可以用于在App当中显示文字
|
||
```dart
|
||
Text(
|
||
'这是一段文字',
|
||
textAlign: TextAlign.left, // 文本对齐方式(左对齐)
|
||
maxLines: 3, // 最大显示行数
|
||
overflow: TextOverflow.ellipsis, // 文本长度溢出的处理方式(显示为...)
|
||
style: TextStyle(
|
||
color: Color.fromARGB(255, 20, 130, 40), // 文字颜色
|
||
fontSize: 20, // 字号大小
|
||
decoration: TextDecoration.underline, // 下划线
|
||
decorationStyle: TextDecorationStyle.solid // 下划线类型
|
||
)
|
||
)
|
||
```
|
||
|
||
#### 容器组件
|
||
就是`Container`类以及它的一些子类
|
||
可以简单理解为div，通常用来方便控制布局
|
||
```dart
|
||
Container(
|
||
child: Text(
|
||
'这是一段文字',
|
||
style: TextStyle(fontSize: 40),
|
||
),
|
||
alignment: Alignment.bottomLeft, // 底部居左对齐
|
||
color: Color.fromARGB(255, 50, 50, 50), //内部文字的颜色
|
||
margin: EdgeInsets.fromLTRB(10, 20, 10, 30), // 左 上 右 下
|
||
)
|
||
```
|
||
属性也都很容易理解，可以设置容器的宽高，内外边距等等
|