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 }}// 继续创建一个无状态HomePageclass 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 }}// 继续创建一个无状态HomePageclass 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 { // 声明一个int变量 int count = 0; @override Widget build(BuildContext context) { return Column( children: [ Text("$count"), // 引用变量 RaisedButton(onPressed: () { // 创建一个按钮 setState(() { count++; }); }, child: Text("点击自增"), // 增加按钮文字，层级位于按钮的（）内 ) ], ); }}