Flutter 3 基础07: 重构按钮代码

在上一篇文章中,我们成功添加了一个按钮控件。当然,我们还会学习和添加更多控件。但是,随着增加的控件变多,就会让 main.dart 文件中的代码变得臃肿,严重影响代码质量。

本文就会对代码进行一次重构,把按钮控件的代码迁移到独立文件中。

启动 Android Studio,打开 hello_world 项目,运行模拟器,这样就可以实时看到编码产生的效果。现在,我们能看到部件导航页面的绿色按钮。

现在,让我们动手完成重构工作。

创建按钮文件

  1. 在项目的 lib 目录下,创建一个名称为 widget 新文件夹:
  1. lib/widget 文件夹下,创建一个 my_button.dart 的新文件:
  1. 打开 lib/widget/my_button.dart 文件,添加下面的导入命令:
dart 复制代码
import 'package:flutter/material.dart';
  1. 继续在导入命令下面,输入 stless,会出现如下提示:
  1. 接着,按下回车键,编辑器会自动生成如下代码:
  1. 在自动生成代码的光标处,输入类名称 MyButton, 按下回车键,产生的代码如下所示:
dart 复制代码
import 'package:flutter/material.dart';  
  
class MyButton extends StatelessWidget {  
  const MyButton({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    return const Placeholder();  
  }  
}

迁移按钮代码

  1. 找到并打开 main.dart 文件,定位到下面的代码并拷贝:
dart 复制代码
MaterialButton(  
  textColor: Colors.white,  
  color: Colors.green,  
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),  
  onPressed: () {  
    print('按钮被点击');  
  },  
  child: const Text('显示'),  
)
  1. 回到 my_button.dart 文件,找到下面的代码:
dart 复制代码
return const Placeholder();  
  1. 删除 const Placeholder() 这部分代码,粘贴我们刚才拷贝的代码:
dart 复制代码
@override  
Widget build(BuildContext context) {  
  return MaterialButton(  
    textColor: Colors.white,  
    color: Colors.green,  
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),  
    onPressed: () {  
      print('按钮被点击');  
    },  
    child: const Text('显示'),  
  );  
}

替换按钮代码

  1. 打开 main.dart 文件,在文件的开头,加入下面的导入命令:
dart 复制代码
import 'package:hello_world/widget/my_button.dart';
  1. 继续在 main.dart 文件中,找到刚才拷贝的代码,并删除这些代码,替换为如下代码:
dart 复制代码
MyButton()

这部分完整的代码如下:

dart 复制代码
// 创建一组彩色的容器  
static List<Widget> pages = <Widget>[  
  Container(color: Colors.red),  
  Container(  
      child: const MyButton()),  
  Container(color: Colors.blue)  
];

这样,我们的代码清爽了许多。不管以后按钮代码变得多复杂,这里依旧整洁。

验证效果

热重启项目,点击部件导航图标,按钮依然正常显示(当然,与重构之前没有变化),点击按钮,控制台也能够正常输出。重构成功。

部件页面:

控制台输出:

提交代码

我们已经完成了按钮控件的重构,又到达了一个小小的里程碑,应该对代码进行提交,保持良好编程习惯。

shell 复制代码
git add .
git commit -m '重构按钮控件到独立文件。'
相关推荐
_院长大人_17 分钟前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15881 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫2 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo2 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li2 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
LinXunFeng3 小时前
Flutter webview 崩溃率上升怎么办?我的分析与解决方案
flutter·ios·webview
浪裡遊4 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz5 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom5 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1235 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js