flutter学习笔记一慕课技术胖老师听课笔记

2- 5 写一个 HelloWorld 程序

Flutter upgrade:cmd 控制台中运行 Flutter upgrade，升级 flutterSDK
Flutter doctor 查看 flutterSDK 版本
flutter 中的快捷键
r：点击后热加载，直接查看预览效果
p：在虚拟机中显示网格
o：切换 Android 和 iOS 的预览模式
q：退出调试预览模式

// 谷歌推出的扁平化样式 大气美观
import 'package:flutter/material.dart';
// 入口文件
void main() => runApp(MyApp());
// 定义 MyApp 函数 继承静态的组件
class MyApp extends StatelessWidget {
//  重写 build 方法
  @override
//  返回一个组件 传递一个上下文
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "welcome to flutter",
      home: new Scaffold(
        appBar: new AppBar(title: new Text("Hello Worldtitle"),
        ),
        body: new Center(child: new Text("Hello Worldbody"),
        ),
      ),
    );
  }
}

3- 1 节 TextWidget 文本组件

import 'package:flutter/material.dart';

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

// 静态组建
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Text(
          'Flutter 一切皆组件。Flutter 一切皆组件。Flutter 一切皆组件。Flutter 一切皆组件。Flutter 一切皆组件。',
//                居中对齐 left right start end(后两个工作不常用 和 left right 类似 运行效果差不多)
          textAlign: TextAlign.center,
//              最大行数
          maxLines: 1,
//              默认值 直接把文本截断
//              overflow: TextOverflow.clip,
//            超出省略号 fade 不常用 逐行颜色透明度减淡
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
              fontSize: 25.0,
              color: Color.fromARGB(255, 255, 150, 150),
//                  下划线实线
              decorationStyle: TextDecorationStyle.solid,
              decoration: TextDecoration.underline),
        )),
      ),
    );
  }
}

3- 2 节 ContainerWidget 容器组件 -1

import 'package:flutter/material.dart';

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

// 静态组建
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Container(
          child: new Text(
            'Hello Imooc',
            style: TextStyle(fontSize: 40.0),
          ),
//          底部居左对齐 第一个值为垂直方向 第二个值为水平方向
//          alignment: Alignment.bottomLeft,
          //          垂直居中水平向左对齐
          alignment: Alignment.centerLeft,
//          宽高颜色
          width: 500.0,
          height: 400.0,
          color: Colors.lightBlue,
        )),
      ),
    );
  }
}

3- 3 节 ContainerWidget 容器组件 -2

import 'package:flutter/material.dart';

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

// 静态组建
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Container(
          child: new Text(
            'Hello Imooc',
            style: TextStyle(fontSize: 40.0),
          ),
          alignment: Alignment.bottomLeft,
          width: 500.0,
          height: 400.0,

//              内边距 20
//              padding:const EdgeInsets.all(20.0),
//            分别设置上下左右的边距
          padding: const EdgeInsets.fromLTRB(10.0, 0, 0, 59.0),
//              外边距
          margin: const EdgeInsets.all(10.0),
          decoration: new BoxDecoration(
            gradient: const LinearGradient(colors: [Colors.lightGreen, Colors.purple, Colors.amber]),
          ),
        )),
      ),
    );
  }
}