Flutter---默认程序（计数器）

实现效果

当点击右下角的加号按钮时，屏幕中间的数字会叠加，相当于计数器的功能。

整体架构

main.dart(入口层)-->MyApp(应用配置层)-->MyHomePage(页面层)-->_MyHomePageState(状态管理层)

页面绘制的逻辑

①main函数里面运行MyApp,

②MyApp创建Material设计环境，

③MaterialApp初始化首页，

④MyHomePage中的createState()创建_MyHomePageState实例

⑤_MyHomePageState中的build函数建造具体UI绘制到屏幕

构造函数

const MyHomePage({super.key, required this.title});//接收title参数，required表示强制必须传递该参数

计数器的实现

①用户点击按钮

②调用_incrementCounter()

③执行_count++

④触发setState重建UI

修改一些代码，来改变页面UI

修改配色方案

//把紫色变成蓝色
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),

效果图

修改成暗色模式，默认是亮色模式

//修改为暗色模式
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue,brightness: Brightness.dark),

效果图

修改全局字体的字号

在修改颜色的下面加
//colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),textTheme: TextTheme(  // 全局文字样式bodyMedium: TextStyle(fontSize: 20), // Flutter 3.x+),

效果图

修改按钮的位置

//centerTop：最上方的中间/centerFloat:最下方的中间
//endContained：右下角/endTop:右上角/startTop：左上角/startFloat:左下角
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, // 按钮的位置控制
//floatingActionButton: FloatingActionButton(

效果图

代码实例

main.dart

import 'package:flutter/material.dart'; //导入Material设计组件库void main() {runApp(const MyApp()); //应用入口
}class MyApp extends StatelessWidget { //应用根目录 （StatelessWidget不可变UI）const MyApp({super.key});//默认构造函数@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //应用标题（显示在任务管理器）theme: ThemeData(   //全局主题配置//colorScheme：自动生成的配色方案，textTheme:预定义的文字样式colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),//完整配色方案（紫色）),//首页，应用的第一个页面home: const MyHomePage(title: 'Flutter Demo Home Page'),//构造MyHomePage传入标题);}
}class MyHomePage extends StatefulWidget { //主页(有状态)，（StatefulWidget可变UI）//构造函数const MyHomePage({super.key, required this.title});//接收title参数，required表示强制必须传递该参数final String title; //存储通过构造函数传入的标题@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> { //主页状态管理int _counter = 0;//计数器状态void _incrementCounter() {setState(() { //调用setState()触发UI更新_counter++; //状态变更});}@overrideWidget build(BuildContext context) {return Scaffold( //页面骨架appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),//使用传入的标题),body: Center(//居中布局child: Column( //垂直排列子组件mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:'),Text('$_counter',//显示计数器值，数据绑定style: Theme.of(context).textTheme.headlineMedium,),],),),//centerTop：最上方的中间/centerFloat:最下方的中间
//endContained：右下角/endTop:右上角/startTop：左上角/startFloat:左下角
//floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, // 按钮的位置控制floatingActionButton: FloatingActionButton(onPressed: _incrementCounter, //点击回调，事件绑定tooltip: 'Increment', //长按提示child: const Icon(Icons.add), //“+”图标),);}
}