概述

由于本人是做iOS出身的，也不太會(huì)寫(xiě)博客，同時(shí)也是初學(xué)Flutter，所以有問(wèn)題大家可以評(píng)論指出，共同探討進(jìn)步。喜歡就點(diǎn)個(gè)贊！多謝！

簡(jiǎn)介

Flutter是谷歌的移動(dòng)UI框架 ，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶(hù)界面。采用Dart語(yǔ)言開(kāi)發(fā)。具體的環(huán)境搭建，Dart的語(yǔ)法，網(wǎng)上一大堆就不多做介紹了。

第一個(gè)Flutter程序

第一個(gè)示例也從Hello world 寫(xiě)起，很簡(jiǎn)單，就實(shí)現(xiàn)了一個(gè)中心的Title。一個(gè)頂部appBar樣式。

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello world',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello world',style: TextStyle(color: Color.fromARGB(255, 0, 255, 244)),),
        ),
        body: Center(
          child: Text('Hello world'),
        ),
      ),
    );
  }
}

解釋:
首先要導(dǎo)入flutter/material.dart 這個(gè)庫(kù)，這是一個(gè)谷歌提供的風(fēng)格庫(kù)，暫時(shí)一般都用這個(gè)吧。

程序的入口是main()函數(shù)，void main() => 表示main函數(shù)指向的方法，調(diào)用了runApp這個(gè)方法，傳給了一個(gè)MyApp的實(shí)例化對(duì)象。這行代碼其實(shí)就類(lèi)似于iOS 中 設(shè)置self.window.rootViewController。

MyApp 是一個(gè)繼承自 StatelessWidget組件的類(lèi)，需要重寫(xiě)一個(gè)父類(lèi)的build方法，傳入的是一個(gè) context上下文。

返回一個(gè)MaterialApp實(shí)例，這個(gè)里面可以設(shè)置，title，home，theme等等。

在home里面需要設(shè)置一個(gè)腳手架，也就是Scaffold組件，實(shí)現(xiàn)一個(gè)AppBar，類(lèi)似Navgationbar，同樣可以設(shè)置title，這個(gè)title需要傳入一個(gè)Text組件。

Body表示頁(yè)面的主題，傳入一個(gè)Center組件。Child表示他的子類(lèi)。

這個(gè)實(shí)例很簡(jiǎn)單也沒(méi)有什么需要講的。