Flutter自定义组件插件custom_widget_flutter的使用

特性

一组为更好的体验而定制的组件，包括常见的自定义组件如CustomImageView、CustomButton、CustomText、CustomEditText。

额外信息

即将发布：所有视图的解释说明。

示例代码

以下是一个使用custom_widget_flutter插件的完整示例代码：

import 'package:custom_widget_flutter/widgets/custom_text_form_field.dart';
import 'package:flutter/material.dart';

import 'color_utils.dart';

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

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

  // 这个小部件是您的应用的根。它是有状态的，这意味着它有一个状态对象（在下面定义），该对象包含影响其外观的字段。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme(
            brightness: Brightness.light,
            error: ColorUtils.error,
            onError: ColorUtils.onError,
            primary: ColorUtils.primary,
            onPrimary: ColorUtils.onPrimary,
            secondary: ColorUtils.secondary,
            onSecondary: ColorUtils.onSecondary,
            surface: ColorUtils.surface,
            onSurface: ColorUtils.onSurface,
            outline: ColorUtils.surface,
            tertiary: ColorUtils.tertiary,
            onTertiary: ColorUtils.onTertiary,
            outlineVariant: ColorUtils.onSurfaceVariant),
        textTheme: const TextTheme(
          headlineMedium: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.w600,
          ),
          headlineSmall: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w600,
          ),
          bodyLarge: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w400,
          ),
          bodyMedium: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w400,
          ),
          bodySmall: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          labelLarge: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w400,
          ),
          labelSmall: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // 这个小部件是您的应用的主页。它有状态，意味着它有一个状态对象（定义在下面），该对象包含影响其外观的字段。
  // 这个类是状态的配置。它保存由父组件（在这个例子中是App小部件）提供的值（在这个例子中是标题），并用于构建方法的状态。小部件子类中的字段总是标记为“final”。

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      // 这个调用setState告诉Flutter框架某些东西已经改变，导致它重新运行下面的build方法，以便显示可以反映更新值的新界面。如果我们不调用setState来改变_counter，那么build方法将不会被重新运行，因此看起来什么都不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法每次调用setState时都会重新运行，例如通过上面的_incrementCounter方法。
    //
    // Flutter框架经过优化，使得重建方法运行得很快，因此您可以只重建任何需要更新的东西，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试：尝试在这里将颜色更改为特定颜色（可能是Colors.amber），并触发热重载以查看AppBar的颜色变化，同时其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 在这里，我们从MyHomePage对象中获取值，该对象是由App.build方法创建的，并使用它来设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子项并将它定位在父项的中间。
        child: Column(
          // Column也是一个布局小部件。它接受一个小部件列表并垂直排列它们。默认情况下，它根据其子项水平调整自身大小，并试图与其父项一样高。
          //
          // Column有许多属性可以控制其自身的大小和其子项的位置。在这里，我们使用mainAxisAlignment将子项垂直居中；主轴是垂直的（因为Column是垂直的，交叉轴将是水平的）。
          //
          // 尝试：调用“调试绘制”（在IDE中选择“切换调试绘制”操作，或在控制台中按“p”），可以看到每个小部件的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomTextFormField(
              titleEnabled: true,
              title: '测试',
              controller: TextEditingController(),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ), // 这个尾随逗号使自动格式化更好看。
    );
  }
}