flutter demo代码详解

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

• 这段代码是一个 Flutter 应用程序的入口点，定义了 main 函数，用于运行应用程序。

• main 函数: 这是 Dart 语言的入口点，当应用程序启动时会首先执行 main 函数。在这个函数中，通常会调用 runApp 函数来运行应用程序的根组件。

• runApp 函数: 这个函数接受一个 Widget 作为参数，用于指定应用程序的根组件。在这里，传入了一个名为 MyApp 的无状态 Widget。

• const MyApp(): 这是一个对 MyApp 构造函数的调用，创建了一个 MyApp 的实例。const 关键字用于声明这个实例是一个编译时常量，以提高性能和效率。

• 通过这段代码，您可以启动一个 Flutter 应用程序，并将其根组件设置为 MyApp。

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    // This is the theme of your application.
    //
    // TRY THIS: Try running your application with "flutter run". You'll see
    // the application has a purple toolbar. Then, without quitting the app,
    // try changing the seedColor in the colorScheme below to Colors.green
    // and then invoke "hot reload" (save your changes or press the "hot
    // reload" button in a Flutter-supported IDE, or press "r" if you used
    // the command line to start the app).
    //
    // Notice that the counter didn't reset back to zero; the application
    // state is not lost during the reload. To reset the state, use hot
    // restart instead.
    //
    // This works for code too, not just values: Most code changes can be
    // tested with just a hot reload.
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
    useMaterial3: true,
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
  }
}

• 这是一个 Flutter 应用程序的根组件 MyApp，它继承自 StatelessWidget。使用了 MaterialApp 包裹主页 MyHomePage。

• MyApp 类: 这是一个继承自 StatelessWidget 的类，表示应用程序的根组件。由于它是无状态的，所以它的外观不会随时间变化，但是可以重新构建。

• 构造函数: MyApp 类有一个构造函数，通过构造函数可以传递一些参数，这里使用了 const 构造函数语法。

• build 方法: 这个方法是 StatelessWidget 必须实现的方法，用于构建并返回界面的实际内容。在这里，返回了一个 MaterialApp，它是一个 MaterialApp Widget，定义了应用程序的基本属性，包括标题、主题和主页。

• MaterialApp: 这是一个方便的 Material Design 应用程序布局组件，它包含了应用程序的主题（theme）和主页（home）。

• title: 设置应用程序的标题为 ‘Flutter Demo’。

• theme: 定义应用程序的主题，包括颜色方案（colorScheme）和是否使用 Material 3 风格（useMaterial3）。

• ColorScheme.fromSeed: 这里使用了颜色方案的生成器，通过 seedColor 属性设置主题的种子颜色为浅蓝色（Colors.lightBlueAccent）。

• useMaterial3: 这个属性指定是否使用 Material 3 风格，即最新的 Material Design 风格。

• home: 设置应用程序的主页为 MyHomePage，这是一个自定义的主页组件。

• 通过这段代码，您定义了一个 Flutter 应用程序的根组件，并设置了一些基本的应用程序属性和主题。

• 注：在注释中提到了一些交互式的提示，建议在运行应用程序时尝试更改颜色并使用热重载来查看效果。这是 Flutter 开发中常用的调试和测试技巧。

·

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  
  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.
  
  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".
  
  final String title;
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

• 这是一个 Flutter 中的 StatefulWidget，表示应用程序的主页 MyHomePage 类。
  MyHomePage 类: 这是一个 StatefulWidget 类，表示应用程序的主页。

• 构造函数: MyHomePage 类有一个构造函数，通过构造函数可以传递一个标题（title）参数给主页。这个构造函数使用了 const 构造函数语法，并通过 super.key 调用父类的构造函数。

• Stateful Widget: 这个类是 Stateful Widget，意味着它有一个与之相关联的 State 对象（在下面的 _MyHomePageState 中定义），该 State 对象包含影响外观的字段。

• final String title: 类中定义了一个 title 字段，用于保存传递给主页的标题。

• createState 方法: 这个方法用于创建与此 StatefulWidget 关联的 State 对象，即 _MyHomePageState。在 Flutter 中，State 对象负责保存和管理 Widget 的状态信息。

• _MyHomePageState: 在这个类中定义了实际的状态对象，包含了与主页相关的状态信息，比如计数器等。这个类是私有的，通常会包含与外部 Widget 交互的逻辑和状态管理。

• 总体而言，MyHomePage 类是一个带有状态的主页 Widget，通过构造函数传递标题，并与 _MyHomePageState 类关联以管理状态信息。

.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  
  void _incrementCounter() {
  setState(() {
    // This call to setState tells the Flutter framework that something has
    // changed in this State, which causes it to rerun the build method below
    // so that the display can reflect the updated values. If we changed
    // _counter without calling setState(), then the build method would not be
    // called again, and so nothing would appear to happen.
    _counter++;
  });
  }
  
  @override
  Widget build(BuildContext context) {
  // This method is rerun every time setState is called, for instance as done
  // by the _incrementCounter method above.
  //
  // The Flutter framework has been optimized to make rerunning build methods
  // fast, so that you can just rebuild anything that needs updating rather
  // than having to individually change instances of widgets.
  return Scaffold(
    appBar: AppBar(
    // TRY THIS: Try changing the color here to a specific color (to
    // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
    // change color while the other colors stay the same.
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text(widget.title),
    ),
    body: Center(
    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: Column(
      // Column is also a layout widget. It takes a list of children and
      // arranges them vertically. By default, it sizes itself to fit its
      // children horizontally, and tries to be as tall as its parent.
      //
      // Column has various properties to control how it sizes itself and
      // how it positions its children. Here we use mainAxisAlignment to
      // center the children vertically; the main axis here is the vertical
      // axis because Columns are vertical (the cross axis would be
      // horizontal).
      //
      // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
      // action in the IDE, or press "p" in the console), to see the
      // wireframe for each widget.
      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),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
  }
}

• 这段代码定义一个名为 _MyHomePageState 的状态类，它继承自State < MyHomePage >，用于管理 MyHomePage 的状态信息。

• _counter: 这是一个整型变量，用于记录按钮点击的次数。

• _incrementCounter 方法: 当浮动操作按钮被点击时，会调用此方法来增加 _counter 的值，并通过 setState 方法通知 Flutter 框架进行界面更新。

• build 方法: 这个方法用于构建界面的主要内容。当调用 setState 后，Flutter 框架会自动调用 build 方法来重新构建界面，以便反映最新的状态。

• Scaffold: 这是一个方便的 Material Design 布局组件，提供了应用程序常见的基本布局结构，包括应用栏（appBar）、主体内容（body）和浮动操作按钮（floatingActionButton）等。

• AppBar: 应用栏部分，显示应用程序的标题和其他操作按钮。

• Center 和 Column: 这两个布局组件用于将子组件垂直居中显示，并以列的方式排列子组件。

• Text: 显示文本内容，用于显示按钮点击的次数。

• FloatingActionButton: 浮动操作按钮，用于触发增加计数器操作。

• 通过这段代码，您可以创建一个带有增加计数器功能的 Flutter 应用程序主页。