Flutter自定义Widget展示插件widget_view的使用

Widget View 介绍

一个支持在Widget中分离逻辑和视图的Dart包。

这个包的原始想法

Flutter: WidgetView - A Simple Separation of Layout and Logic - gskinner blog

插件widget_view的使用方法

以下是一个使用StatefulWidgetView的计数器示例：

// 主页面类
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  // 创建控制器实例
  [@override](/user/override)
  _MyHomePageController createState() => _MyHomePageController();
}

// 控制器类，用于管理状态和逻辑
class _MyHomePageController extends State<MyHomePage> {
  int counter = 0;

  // 增加计数器的方法
  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  // 返回视图类
  [@override](/user/override)
  Widget build(BuildContext context) => _MyHomePageView(this);
}

// 视图类，负责UI布局
class _MyHomePageView
    extends StatefulWidgetView<MyHomePage, _MyHomePageController> {
  const _MyHomePageView(_MyHomePageController controller, {Key key})
      : super(controller, key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 显示标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: <Widget>[
            Text('你已经按下了按钮次数：'), // 提示文字
            Text('${controller.counter}', // 显示当前计数值
                style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.incrementCounter, // 绑定增加计数器的方法
        tooltip: '增加', // 工具提示
        child: Icon(Icons.add), // 按钮图标
      ),
    );
  }
}

Live Templates for IntelliJ IDEs (如 Android Studio 等)

请参阅 intelij_live_templates.md。

Snippets for Visual Studio Code

暂未提供。欢迎提交您的 Pull Request。

特性和问题

请在 GitHub Issue Tracker 中提交功能请求或报告问题。

完整示例代码

以下是完整的示例代码，包括 main.dart 文件：

import 'package:flutter/material.dart';
import 'package:widget_view/widget_view.dart'; // 导入 widget_view 包

void main() {
  runApp(MyApp()); // 启动应用
}

// 应用主类
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'package:widget_view Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'package:widget_view Demo Home Page'), // 设置首页
    );
  }
}

// 主页面类
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageController createState() => _MyHomePageController(); // 创建控制器
}

// 控制器类，管理状态和逻辑
class _MyHomePageController extends State<MyHomePage> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++; // 更新计数器
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) => _MyHomePageView(this); // 返回视图类
}

// 视图类，负责 UI 布局
class _MyHomePageView
    extends StatefulWidgetView<MyHomePage, _MyHomePageController> {
  const _MyHomePageView(_MyHomePageController controller, {Key key})
      : super(controller, key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 显示标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: <Widget>[
            Text('你已经按下了按钮次数：'), // 提示文字
            Text('${controller.counter}', // 显示当前计数值
                style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.incrementCounter, // 绑定增加计数器的方法
        tooltip: '增加', // 工具提示
        child: Icon(Icons.add), // 按钮图标
      ),
    );
  }
}