【Flutter——组件】

StatelessWidget（无状态小组件）

import 'package:flutter/material.dart';

class MyText extends StatelessWidget {
  final String text;

  MyText({required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(fontSize: 16),
    );
  }
}

StatelessWidget 是一个不可变的小部件。它通过构造函数接收属性，然后使用这些属性来构建界面。当属性发生变化时，需要重新创建该小部件来更新界面。

上述代码定义了一个 MyText 类，它继承自 StatelessWidget。通过构造函数传入一个 text 参数，然后在 build 方法中使用 Text 小部件将 text 属性展示出来。

StatefulWidget（有状态小组件）

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('计数：$_count'),
        RaisedButton(
          onPressed: _increment,
          child: Text('增加'),
        ),
      ],
    );
  }
}

StatefulWidget 是一个可变的小部件。它持有一个状态对象，并且可以在需要时更新状态。通常包含两个类：继承自 StatefulWidget 的小部件类和继承自 State 的状态类。

上述代码定义了一个 Counter 类，它继承自 StatefulWidget。在 _CounterState 类中定义了一个 _count 状态变量和 _increment 方法用于增加计数。使用 setState 方法更新状态，并触发小部件的重新构建。

在 build 方法中，通过 Column 小部件将文本和按钮垂直排列，并展示当前的计数值。点击按钮后，计数值会自动增加。

Container（容器）

import 'package:flutter/material.dart';

class MyContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        '你好',
        style: TextStyle(fontSize: 16),
      ),
      margin: EdgeInsets.all(16.0),
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10.0),
      ),
    );
  }
}

Container 是一个常用的小部件，用于包装其他小部件，并提供布局和样式设置。它可以设置边距、填充、背景颜色等属性，还可以指定宽度和高度。

上述代码定义了一个 MyContainer 类，它继承自 StatelessWidget。在 build 方法中，创建了一个 Container 小部件。其中，margin 表示外边距，padding 表示内边距，decoration 用于设置背景颜色和圆角。

在 Container 中包含了一个 Text 小部件，展示文本内容。

ListView（列表视图）

import 'package:flutter/material.dart';

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(title: Text('项目1')),
        ListTile(title: Text('项目2')),
        ListTile(title: Text('项目3')),
      ],
    );
  }
}

ListView 是一个可滚动的小部件，用于显示具有垂直方向的列表。它可以包含多个子小部件，并在需要时自动滚动。

上述代码定义了一个 MyListView 类，它继承自 StatelessWidget。在 build 方法中，创建了一个 ListView 小部件。其中，children 属性是一个包含 ListTile 小部件的列表。

每个 ListTile 都是列表中的一个项目，通过 title 属性设置文本内容。在这个例子中，列表中包含了三个项目。

GridView（网格视图）

import 'package:flutter/material.dart';

class MyGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: [
        Text('项目1'),
        Text('项目2'),
        Text('项目3'),
        Text('项目4'),
      ],
    );
  }
}

GridView 是一个可滚动的小部件，用于显示具有网格布局的项目。它可以在水平和垂直方向上滚动，并自动调整项目的大小。

上述代码定义了一个 MyGridView 类，它继承自 StatelessWidget。在 build 方法中，创建了一个 GridView.count 小部件。其中，crossAxisCount 属性表示每行的列数。

在 GridView 中包含了四个 Text 小部件，作为网格中的项目。

MaterialApp（应用程序小组件）

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的应用',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: Text('欢迎使用 Flutter'),
      ),
    );
  }
}

MaterialApp 是一个通用的应用程序小部件，它封装了一个典型的 Material Design 应用程序的布局和样式。它提供了一个顶层的应用程序小部件，并配置了一些通用属性，如主题颜色、标题栏等。

上述代码定义了一个 MyApp 类，它继承自 StatelessWidget。在 build 方法中，创建了一个 MaterialApp 小部件。其中，title 属性设置应用程序的标题，theme 属性用于配置主题颜色。

在 MaterialApp 中指定了一个 MyHomePage 小部件作为应用程序的主页。

MyHomePage 类继承自 StatelessWidget，在 build 方法中创建了一个包含标题栏和居中文本的 Scaffold 小部件。其中，appBar 属性定义了标题栏的样式，body 属性设置了页面的内容。