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

文章目录

一丶效果图
二丶输出一句Hello World
三丶知识点
四丶笔记

一丶效果图

二丶输出一句Hello World

import 'package:flutter/material.dart';void main()=>runApp(MyApp());
//等价于：
/*
void main(){runApp(MyApp());
}
*/class MyApp extends StatelessWidget{      //抽离页面全部内容@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(                     //顶层 widgethome:Scaffold(                       //Material Design 布局结构的基本实现appBar: AppBar(                      //显示在界面顶部的一个 AppBar。title: Text('Flutter Demo'),      //标题),body: HomeContent(),              //当前界面所显示的主要内容 Widget。),theme: ThemeData(                   //主题primarySwatch: Colors.yellow        //修改主题颜色),);}
}class HomeContent extends StatelessWidget{ //抽离主界面@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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 buildreturn 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 buildreturn MaterialApp(home:Scaffold(appBar: AppBar(title: Text('Flutter Demo'),),body: HomeContent(),),theme: ThemeData(primarySwatch: Colors.yellow    //修改主题颜色),);}
}
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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()，那么意思已经很明显了，就是在要实现哪些功能的时候，就实例化哪些组件即可！

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

Futter基础第3篇：实现引用远程图片、本地图片、实现圆形图片，实现圆角图片【Image.network、Image.asset、BorderRadius.circular（150）】
文章目录一丶效果图二丶代码+注释三丶知识点一丶效果图 [1]引用远程图片 [2]引用本地图片 [3]实现圆形图片(方法一).圆角图片(受弧度影响) [4]实现圆形图片(方法二) 二丶 ...
Python学习日记-day1基础篇字符输出注释
Python学习日记-day1基础篇字符输出注释 by北栀一刺 # -*- coding: utf-8 -*- """ Spyder EditorThis is a ...
拼题A基础篇 11 输出闰年
拼题A 基础篇11 输出闰年 #include<stdio.h> main() {int year, number = 0;scanf("%d", &year) ...
算法之基础数论应用篇(一)
基础数论应用篇子集和题目描述筛质数筛质数模板欧拉筛线性筛哥德巴赫猜想夏洛克和他的女朋友二次筛法分解质因数试除法分解质因数分解阶乘质因子快速幂模板快速幂快速乘法序列的第 ...
JavaScript 基础知识 - 入门篇(二)
11. 函数 11.1 函数的基础知识为什么会有函数? 在写代码的时候,有一些常用的代码需要书写很多次,如果直接复制粘贴的话,会造成大量的代码冗余: 函数可以封装一段重复的javascript代码, ...
Python基础语法入门篇(一)
Python基础语法入门篇(二) 1. 注释在我们工作编码的过程中,如果一段代码的逻辑比较复杂,不是特别容易理解,可以适当的添加注释,以辅助自己或者其他编码人员解读代码. 注释是给程序员看的,为了 ...
Java入门基础教程第一篇
Java入门基础 Java是是一门面向对象编程语言,现在广泛使用,名声和c/c++.python一样,虽然我最常用的语言是python,但现在现在闲来无事,就写了这篇文章. 目录 Java入门基础下 ...
vue2+vue3小白零基础教程—vue2篇，全网2021最详细教程
vue教程提示:Vue3系列请参考Vue2+Vue3小白零基础教程-vue3篇文章,本文为vue2篇. 1. Vue核心 1.1 Vue简介 1.1.1 Vue是什么一套用于构建用户界面的渐进式J ...
ppt讲解计算机的组成,计算机基础(基本组成篇)讲解.ppt
计算机基础(基本组成篇)讲解计算机的基本组成计算机由硬件和软件组成硬件主板 CPU (中央处理器) 内存硬盘显卡.声卡显示器键盘.鼠标主板主板(Main board,Motherb ...
零基础学C++——黑马程序员课程笔记（C++基础语法入门篇）
封面来自互联网侵删视频地址:点击访问 (我这里开发工具选用VSstudio) 此笔记有三个系列: C++基础语法入门篇 C++核心编程篇点击查看 C++提高编程篇文章目录 C++初识变量常量 ...

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

文章目录

一丶效果图

二丶输出一句Hello World

三丶知识点

四丶笔记

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

最新文章

热门文章

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

文章目录

一丶 效果图

二丶 输出一句Hello World

三丶知识点

四丶笔记

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

最新文章

热门文章

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

一丶效果图

二丶输出一句Hello World

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