三、Flutter初体验-Helloworld

2020-10-28 本文已影响0人爱玩游戏的iOS菜鸟

一、创建Flutter项目

创建flutter新项目，可以通过命令行创建 和 通过开发工具创建

1.1 命令行创建

Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识
创建完之后使用自己喜欢的开发工具打开即可(Android Studio 或 VS code)

flutter create learn_flutter

1.2 通过开发工具创建

直接通过Android Studio来进行创建，Start a new Flutter project，之后填写相关的信息即可

1.3 默认程序分析

默认项目分析：

目录下有一个lib文件夹，存放编写的Flutter代码；
main.dart，是Flutter启动的入口文件，里面有main函数；

二、开始Flutter代码

2.1 Hello world

import 'package:flutter/material.dart';

main(){
  runApp(Center(child:
    Text(
      "hello dart",
      textDirection: TextDirection.ltr,
       style: TextStyle(
           color: Colors.blue,
           fontSize: 20)
      ),
    ),
  );
}

我们看到上面的代码，难免心生疑惑：

Dart程序的入口都是main函数，而Flutter是Dart编写的，入口也是main函数；
导入的Material是做什么用？
在main函数中调用了一个runApp()函数又是干什么呢？

2.2 代码分析

2.2.1 runApp和Widget

1、runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的

点到runApp的源码，可以查看到该函数
暂时不分析具体的源码（对于初学者并不友好）

2、Widget

学习Flutter一开始就要有基本的认识：Flutter中万物皆Widget
在我们iOS或者Android开发中，我们的界面有很多种类的划分：Application、View Controller、Activity、View、Button等等；但是在Flutter中，前面所说的都是不同的Widget, 甚至是内边距的设置，也是通过Padding的Widget来设置

因此，runApp函数让我们传入的就是一个Widget：

我们可以导入Flutter默认已经给我们提供的Material库，来使用其中的很多内置Widget；

2.2.2 Material设计风格

1、material是什么呢？

material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
Flutter中高度集成了Material风格的Widget；
在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；

2.3. 代码改进

2.3.2. 改进界面结构

正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等

通过下面的代码来实现：

import 'package:flutter/material.dart';

main(){
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("navigationTitle",
          ),
        ),
        body: Center(child:
          Text(
              "hello dart",
              textDirection: TextDirection.ltr,
              style: TextStyle(
                  color: Colors.blue,
                  fontSize: 30
              )
          ),
        ),
      ),
    )
  );
}

上面代码中，是在最外层包裹了MaterialApp

意味着应用都会采用MaterialApp风格，方便我们对应用的设计，并且目前我们使用了其中一个属性：home，应用启动时显示的页面，我们传入了一个Scaffold；

什么是Scaffold(脚手架)？

Scaffold的作用就是搭建页面的基本结构；(给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；)
Scaffold也有一些属性，比如appBar和body；appBar是用于设计导航栏，传入一个title属性(代码如上)；body是页面的内容部分，传入了已经创建好的Center的Widget；

2.3.3 进阶案例实现

案例1：

实现该图中的界面

main.dart:

import 'package:flutter/material.dart';
import './try/window.dart';

main() => runApp(ZQLunchApp());

class ZQLunchApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ZQHomePage()
    );
  }
}

window.dart:

import 'package:flutter/material.dart';

class ZQHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("navigationTitle",
        ),
      ),
      body: ZQContentBody(),
    );
  }
}

class ZQContentBody extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return ZQContentBodyState();
  }
}

class ZQContentBodyState extends State<ZQContentBody>{
  var flag = true;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(
              value: flag,
              onChanged: (value){
                setState(() {
                  flag = value;
                });
              }
          ),
          Text(
            '同意协议',
            style: TextStyle(
              fontSize: 20,
            ),
          )
        ],
      ),
    );
  }
}

案例2：

实现一个列表

import 'package:flutter/material.dart';

class ZQHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品列表",
          style: TextStyle(
            fontSize: 20,
            color: Colors.green,
          ),
        ),
        backgroundColor: Colors.brown,
      ),
      body: ZQHotContent(),
    );
  }
}

class ZQHotContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(10),
        child: ListView(
          children: [
            ProductItem("Apple1", "Macbook Product1", 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
            ProductItem("Apple2", "Macbook Product2", 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg'),
            ProductItem("Apple3", "Macbook Product3", 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg')
          ],
        ),
    );
  }
}

class ProductItem extends StatelessWidget{
  final String title;
  final String detail;
  final String imageUrl;

  ProductItem(this.title, this.detail, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        border: Border.all()
      ),
      child: Column(
        children: [
          Text(
            title,
            style: TextStyle(fontSize: 24),
          ),
          Text(
            title,
            style: TextStyle(fontSize: 18),
          ),
          SizedBox(height: 10,),
          Image.network(imageUrl),
        ],
      ),
    );
  }
}

上面用到了一些没有听说过的一些Widget，可能不太明白什么意思，不过不用担心，在后面的章节会一一讲述到的。