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

实现效果

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

整体架构

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

页面绘制的逻辑

①main函数里面运行MyApp,

②MyApp创建Material设计环境，

③MaterialApp初始化首页，

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

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

构造函数

Dart 复制代码

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

计数器的实现

①用户点击按钮

②调用_incrementCounter()

③执行_count++

④触发setState重建UI

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

修改配色方案

Dart 复制代码

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

效果图

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

Dart 复制代码

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

效果图

修改全局字体的字号

Dart 复制代码

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

效果图

修改按钮的位置

Dart 复制代码

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

效果图

代码实例

main.dart

Dart 复制代码

import 'package:flutter/material.dart'; //导入Material设计组件库

void main() {
  runApp(const MyApp()); //应用入口
}

class MyApp extends StatelessWidget { //应用根目录 （StatelessWidget不可变UI）

  const MyApp({super.key});//默认构造函数

  @override
  Widget 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; //存储通过构造函数传入的标题

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> { //主页状态管理

  int _counter = 0;//计数器状态

  void _incrementCounter() {
    setState(() { //调用setState()触发UI更新
      _counter++; //状态变更
    });
  }

  @override
  Widget 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), //"+"图标
      ),
    );
  }
}