Flutter 学习笔记 《五》 第一个应用 Container Widget 的使用

1、这段代码写在根目录\lib\main.dart文件中，这就是Flutter主文件。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello word',
      home: Scaffold(
        appBar:AppBar(
          title:Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Container(
            child: new Text('高丽辉 我爱你',style: TextStyle(fontSize: 45,color: Colors.red),),
            alignment: Alignment.center,
            width: 500,
            height: 500,
            padding: const EdgeInsets.all(10.0),
            margin:  const EdgeInsets.all(20),
            decoration: new BoxDecoration(
                gradient: const LinearGradient(
                    colors:[Colors.lightBlue,Colors.lightGreen,Colors.purple]
                )
            ),
          ),
        ),
      ),
    );
  }
}

写完后打开终端，运行flutter run,等待一小会，就会看到虚拟机中运行的效果

笔记  引入UI框架

第一行   

import 'package:flutter/material.dart';

第二行 

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

因为这个函数体里只有一行代码，所以可以直接使用=>来省略{}，只有函数体里只有一行时，才可以使用，否则请使用大括号。

 

StatefulWidget和StatelessWidget

• StatefulWidget ： 具有可变状态的窗口部件，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。
• StatelessWidget：不可变状态窗口部件，也就是你在使用时不可以改变，比如固定的文字（写上后就在那里了，死也不会变了）。

这个HelloWorld代码就继承了不可变窗口部件StatelessWidget。

• r 键：点击后热加载，也就算是重新加载吧。
• p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
• o 键：切换android和ios的预览模式。
• q 键：退出调试预览模式。