Flutter学习笔记之·一,有状态和无状态的Widget，AppBar，Body

前言

阿三前端经常玩失踪。。。
NND跟我玩阴的是吧，，直接来。吧

创建flutter项目

flutter create flutter_demo01

运行项目到chrome
这个是运行到虚拟机，一旦页面关闭就要重新启动

flutter run -d chrome

运行项目到指定的端口
运行到指定服务端口

flutter run -d web-server --web-hostname 0.0.0.0 --web-port 8989

无状态就是静态参数。而有状态则是动态参数

无状态weiget

import 这个包以后
在mian之外输入stless ，自动联想创建无状态weiget

import 'package:flutter/material.dart';

main(){
  runApp(MyApp());

}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 必须要有一个MaterialApp
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(), // 引入路由配置homepage为home
    ); // MaterialApp
  }
}
// 继续创建一个无状态HomePage
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 每个页面使用Scaffold包裹
    return Scaffold(
      appBar: AppBar(
        title: Text("AppBar"),  // 设置AppBar的标题
        elevation: 10.0,  // 设置阴影
        centerTitle: true,  // 是否居中，不设置默认为false不居中
      ), // 创建一个AppBar
    );
  }
}

AppBar

有状态Weiget

顾名思义，就是有状态值的Weiget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 必须要有一个MaterialApp
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(), // 引入路由配置homepage为home
    ); // MaterialApp
  }
}

// 继续创建一个无状态HomePage
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 每个页面使用Scaffold包裹
    return Scaffold(
      appBar: AppBar(
        title: Text("AppBar"), // 设置AppBar的标题
        elevation: 10.0, // 设置阴影
        centerTitle: true, // 是否居中，不设置默认为false不居中
      ), // 创建一个AppBar
      body: CountPage(), //创建一个Body指定一个有状态的Wegit
    );
  }
}

// 创建一个有状态的Wegit【CountPage】
class CountPage extends StatefulWidget {
  const CountPage({Key? key}) : super(key: key);

  // 生成了带State状态的
  @override
  _CountPageState createState() => _CountPageState();
}

class _CountPageState extends State<CountPage> {
  // 声明一个int变量
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("$count"), // 引用变量
        RaisedButton(onPressed: () {
          // 创建一个按钮
          setState(() {
            count++;
          });
        },
          child: Text("点击自增"), // 增加按钮文字，层级位于按钮的（）内
        )
      ],
    );
  }
}