Futter基础第1篇： 实现输出Hello World【MaterialApp、Scaffold】

一丶 效果图

二丶 输出一句Hello World

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());
//等价于：
/*
void main(){
	runApp(MyApp());
}
*/

class MyApp extends StatelessWidget{		//抽离页面全部内容
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(						//顶层 widget
      home:Scaffold(						//Material Design 布局结构的基本实现
        appBar: AppBar(						//显示在界面顶部的一个 AppBar。
          title: Text('Flutter Demo'),		//标题
        ),
        body: HomeContent(),				//当前界面所显示的主要内容 Widget。
      ),
          theme: ThemeData(					//主题
        primarySwatch: Colors.yellow		//修改主题颜色
      ),
    );
  }
}

class HomeContent extends StatelessWidget{	//抽离主界面
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(						//居中
      child: Text("Hello Flutter",		//Text组件用来显示字符串内容到页面中
      textDirection:TextDirection.ltr,	//表示文本的显示方式
        style: TextStyle(				//样式
          fontSize: 40.0,				//大小
          color: Colors.yellow,			//颜色
        ),
      ),
    );
  }
}

三丶知识点

1 、MaterialApp
MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的
一些 Widget。一般作为顶层 widget 使用。

常用的属性：
home（主页）
title（标题）
color（颜色）
theme（主题）
routes（路由）

2、Scaffold
Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。

Scaffold 有下面几个主要属性：
appBar - 显示在界面顶部的一个 AppBar。
body - 当前界面所显示的主要内容 Widget。
drawer - 抽屉菜单控件。

四丶笔记

1.
所有的组件都是类

2.
在Dart中，允许实例化类的时候，不写关键词new，例如：
var p = new Persion();
可以写成：
var p = Persion();

3.在Flutter里面，我们把Center放在runApp里面是显然不合理的！
因为：当我们的一个组件功能需求很多的时候，我们的代码就会很多，那么我们放到runApp里，代码就会变得很杂乱冗余
所以：我们可以把它单独抽离成一个组件，相当于Java里的封装，减轻程序负担，节俭代码质量

4.问题：为什么实例化runApp(MyApp());的时候， Widget build(BuildContext context) {
    // TODO: implement build
    return Center(                    //居中
        child: Text('Hello Flutter',
          textDirection: TextDirection.ltr, //表示文本的显示方式
        )
    );
  }抽象方法会自动执行？
答：build 是用来创建 Widget 的，build 在每次界面刷新的时候都会调用

5.child: Text是实例化Text的意思吗？
答：不，我们来看下面这个代码自然就能明白了！

class MyApp extends StatelessWidget{
  @override
  //build 是用来创建 Widget 的，build 在每次界面刷新的时候都会调用
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
          theme: ThemeData(
            primarySwatch: Colors.yellow    //修改主题颜色
      ),
    );
  }
}
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(                    //居中
        child: Text('Hello Flutter',
          textDirection: TextDirection.ltr, //表示文本的显示方式
          style: TextStyle(       //字体样式
            fontSize: 40.0,
            //设置颜色的两种方式
//              方式一
            color: Colors.yellow,
//              方式二：
            //参数依次的含义为：红色，绿色，蓝色，透明度   ，颜色取前三个的混合值，透明度取第四个参数
//            color: Color.fromRGBO(244, 233, 321, 0.5)
          ),
        )
    );
  }
}
我们主要分析body就行了其他的不用管，可以看到body是主页内容，他直接     body: HomeContent(),
等价于 body: new HomeContent()，那么意思已经很明显了，就是在要实现哪些功能的时候，就实例化哪些组件即可！