flutter设置导航栏顶部标题与组件Text和Center和Container详解

无状态组件和有状态组件的介绍

StatelessWidget 是无状态组件，状态是不可以改变的
StatefulWidget 是有状态组件 持有的状态可能在 widge 生命周期中改变
StatelessWidget 是一个抽象类，只要是抽象类，我们就要实现抽象类里面的抽象方法

1快速修复

class MyApp extends StatelessWidget{

}
会报错 我们选择快速修复
然后选择第一个 create 1 misssxxx 实现抽象类里面的抽象方法

class MyApp extends StatelessWidget{
   @override
   Widget build(BuildContext context) {
      // TODO: implement build
      throw UnimplementedError();
   }
}

build 方法会返回一个 Widget(组件)；
在 flutter 中所有的都是组件
Text， Center 也是一个组件

2 center组件实现全屏上下左右居中

import 'package:flutter/material.dart';
void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Text(
      '中文',
      textDirection: TextDirection.ltr,
    ));
  }
}

3设置Text 的文本字体颜色大小

文本的样式需要再TextStyle下去设置
 style: TextStyle(
    fontSize: 40.0, //数字必须是Double类型的
    //  设置字体的颜色
    color: Color.fromARGB(200, 100, 100, 8)
 )

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        // 设置Text的文本字体
        child: new Text(
       '你好Flutter,我开始学习你了',
        textDirection: TextDirection.ltr,
        // 设置字体的颜色
          style: TextStyle(
          fontSize: 40.0, //数字必须是Double类型的
          //  设置字体的颜色
          color: Color.fromARGB(200, 100, 100, 8)),
    ));
  }
}

3 MaterialApp

MaterialApp 是一个方便的 WiDget;
它封装了应用程序实现的 Material Design 所需要的一些 Widget
它一般作为顶层的组件使用

4 使用MaterialApp设置导航栏顶部标题

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 设置顶部的标题
      home: Scaffold(appBar: AppBar(title: Text('首页')), body: MyCont()),
      //设置顶部的颜色
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Text(
      '你好Flutter,我开始学习你了',
      textDirection: TextDirection.ltr,
      //   设置字体的颜色
      style: TextStyle(
          fontSize: 40.0, //数字必须是Double类型的
          //  设置字体的颜色
          color: Color.fromARGB(200, 100, 100, 8)),
    ));
  }
}

4 Scaffold

Scaffold 是 Material Design 布局结构的基本实现
这个类用于显示 drawer snackbar 和底部 sheet 的 api

5 简写

void main(){
    runApp(MyApp())
}

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

Container 组件详解

Container 是一个容器，类似于 div;
Container 是一个类，继承了 StatelessWidget
容器下面放置了一个文本；文本有宽高，背景颜色，边框线

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: Container(
        child: Text('我开始学习你了'),
        width: 750.0, // 都是double类型的，你可以去查看他的属性
        height: 50.0,
        decoration: BoxDecoration(
            //背景颜色
            color: Colors.yellow,
            // 边框颜色,边框线
            border: Border.all(color: Colors.blue, width: 2.0)),
      ));
  }
}

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Text的内容
      child: Text('我开始学习你了我开始学习你了我开始学习你了我开始学习你了我开始学习你了',
          textAlign: TextAlign.right, //文字右对齐
          overflow: TextOverflow.ellipsis, //超出显示省略号
          //设置文本的样式
          style: TextStyle(
              fontSize: 20.0,
              color: Color.fromARGB(255, 255, 255, 203),
              fontStyle: FontStyle.italic, //倾斜
              letterSpacing: 2.0)
          ),

          // Container的设置
          width: 750.0,
          height: 150.0,
          decoration: BoxDecoration(
              //背景颜色
              color: Color.fromARGB(255, 192, 213, 1),
              // 边框颜色,边框线
              border: Border.all(color: Colors.blue, width: 2.0),
              //设置圆角
              borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          // 设置padding 为20
          // padding:EdgeInsets.all(20),
          // 分别表示左 上  右  下
          padding: EdgeInsets.fromLTRB(20, 30, 50, 10),

          //底部左对齐
          alignment: Alignment.bottomLeft,
    );
  }
}