004 flutter基础初始文件讲解（3）

之前，我们正向的学习了一些flutter的基础，如MaterialApp，Scaffold之类的东西，那么接下来，我们将正式接触原代码：

Dart 复制代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _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, 
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, 
        tooltip: 'Increment', 
        child: const Icon(Icons.add), 
      ), 
    );
  }
}

补充：为什么说在flutter里面，万物皆为widget？

widget是flutter里面的一个类，由于好多类的创建都是继承于它，可以说绝大部分都来自于widget，包括但不限于之前看见的，Text，Scaffold，所以就有了这个说法

接下来，我们将逐行讲解：

Dart 复制代码

import 'package:flutter/material.dart';

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

与之前不同的是，这里我们直接调用了MyApp，这里并非是调用类，虽然说MyApp确实是一个类，但是实际上这里是创建了一个类的实例，MyApp并非是flutter自带的类，而是后面我们创建的，见下：

Dart 复制代码

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

这里我们可以看见，MyApp是继承了StatelessWidget的一个类，如果这个时候你按住ctrl键，然后点击StatelessWidget，你就会发现StatelessWidget就是继承自Widget类，正好印证了上面的"万物皆为widget"的说法。

第一步自然是将StatelessWidget的属性继承过来，也就是通过super方法，调用父类的构造函数，值得注意的是，由于所有的widget都继承于widget，而widget有一个key属性，所以是super.key，key可以帮助程序识别widget的身份

这里的title指的是外面的名称，不是页面内，而是指启动程序后，程序的名称（当然，要改设置，不然你看见的名称应该是文件名，或者通过其他代码来修改，这里就先不说），在theme里面，可以设置主题颜色，通过seedColor，可以根据实际情况生成合适的颜色背景，而不用每个地方都由自己设置

最后，设置主界面，当然，这里可以看见，我们通过MyHomePage创建了一个实例，而之于MyHomePage是什么，请见下方，在此之前，还有一个title，这个title指的是标题处的title，也就是主界面顶部的位置的标题

Dart 复制代码

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

这里我们可以看见，MyHomePage继承于StatefulWidget（当然，按住ctrl键点击StatefulWidget，你会发现它继承于Widget），首先我们通过super方法，继承父类的构造函数，当然，我们这里需要一个标题，因为是MyHomePage嘛，所以这里还要一个"required this.title"，required表示这个是必须的，而this.title则是将传入的参数值直接赋值给当前类的 title 属性，当然，这里面还没有title，所以需要下面的final String title来接收，值得注意的是，这里使用的是final，所以值传入后将不可修改

最后通过@override进行重写父类方法

在StatefulWidget中，有个方法叫做createState方法，这里就是重写这个方法

首先，通过State限定类型，必须是 State<具体Widget类型> 的子类，而最后的_MyHomePageState则是创建并返回状态的对象实例，要注意的是，这里的_MyHomePageState是私有的，因为前面加了"_"。

那么今天就先到这啦，祝大家天天开心！代码一遍就通！没有debug的烦恼！如果有讲的不好或者不对的地方，可以指出，博主会修正哒！

004 flutter基础 初始文件讲解（3）

004 flutter基础初始文件讲解（3）