无状态组件和有状态组件

标签：row   watch   import   基本实现   yellow   选择   body   prim   new   

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

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

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. 无状态组件StatelessWidget的使用

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Text(
      ‘你好Flutter,我开始学习你了‘,
      textDirection: TextDirection.ltr,
    ));
  }
}

3设置Text 的文本字体

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())

无状态组件和有状态组件

标签：row   watch   import   基本实现   yellow   选择   body   prim   new   

原文地址：https://www.cnblogs.com/ishoulgodo/p/14829686.html