[译] 深入了解 Flutter，安卓内存监控apk

最新推荐文章于 2024-05-28 11:19:10 发布

m0_66264699

最新推荐文章于 2024-05-28 11:19:10 发布

阅读量221

点赞数

分类专栏：程序员文章标签：架构移动开发 android

本文链接：https://blog.csdn.net/m0_66264699/article/details/122670737

版权

本文探讨了如何重构Flutter应用以提高代码可读性和可维护性，通过引入功能抽象减少重复代码。文章详细介绍了如何将代码组织成组件，如Action组件，并将其封装在独立文件中以实现代码复用。此外，还讨论了响应式编程的概念，展示了如何通过状态管理动态构建组件树，并利用Flutter的响应式模型实现动态视图。通过对Lake业务逻辑类的使用，演示了如何在用户交互时高效地更新UI，同时避免不必要的组件重建，以优化性能。

摘要由CSDN通过智能技术生成

我们的湖泊应用可以重写成下面这样：

import ‘package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Widget imageSection = Image.asset(
‘images/lake.jpg’,
width: 600.0,
height: 240.0,
fit: BoxFit.cover,
);
final Widget titles = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
‘Oeschinen Lake Campground’,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Text(
‘Kandersteg, Swit
zerland’,
style: TextStyle(color: Colors.grey[500]),
),
],
);
final Widget stars = Row(
children: [
Icon(Icons.star, color: Colors.red[500]),
Text(‘41’),
],
);
final Widget titleSection = Container(
padding: const EdgeInsets.all(32.0),
child: Row(
children: [
Expanded(child: titles),
stars,
],
),
);
final Widget callAction = Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.call, color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘CALL’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
);
final Widget routeAction = Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.near_me, color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘ROUTE’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
);
final Widget shareAction = Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.share, color: Theme.of(context).primaryColor),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
‘SHARE’,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Theme.of(context).primaryColor,
),
),
),
],
);
final Widget actionSection = Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
callAction,
routeAction,
shareAction,
],
),
);
final Widget textSec