Flutter笔记五之第一个DEMO

这次主要是代码，重要的内容也都用注释写在代码中了

import 'package:flutter/material.dart';

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

/*
* Widget:万物皆Widget
* 有状态的widget(StatefulWidget)在运行过程中有一些状态(data数据)需要改变
* 无状态的widget(StatelessWidget)状态(内容数据)是确定的，不会改变
* 所有的Widget都不能定义状态
* Flutter运行中，Widget是不断销毁和创建的
* */
class MyApp extends StatelessWidget {
  //Flutter在拿到StatelessWidget时会执行build方法
  //第一次被创建插入Widget树时会执行；父Widget发生改变时会被重新构建执行；当依赖的InheritedWidget数据发生改变时也会执行
  @override
  Widget build(BuildContext context) {
    return // material 是一种设计风格，还有cupertino等风格
      MaterialApp(
        //不显示导航栏上的debug状态
          debugShowCheckedModeBanner: false,
          home: GCHomePage()
      );
  }
}

class GCHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // scaffold:脚手架，帮助我们快速搭建页面
    return Scaffold(
      appBar: AppBar(
        title: Text(
            "第一个项目"
        ),
      ),
      body: GCHomePageContentBody2()//,GCHomePageContentBody1()
    );
  }
}

class GCHomePageContentBody1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Flutter is good!", style: TextStyle(fontSize: 20))
    );
  }
}

class GCHomePageContentBody2 extends StatefulWidget {
  //创建一个State的类来维护状态
  @override
  State createState() {
    // TODO: implement createState
    return GCHomePageContentBody2State();
  }
}

class GCHomePageContentBody2State extends State {
  var selected = true;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(
              value: selected,
              onChanged: (value) {
                //刷新状态
                setState(() {
                  selected = value!;
                });
              }
          ),
          Text("同意协议", style: TextStyle(fontSize: 20))
        ],
      ),
    );
  }
}

版权声明：本文为 Crazy Steven 原创出品，欢迎转载，转载时请注明出处！