Flutter一切皆widget但是不要将所有东西放入一个widget

本文主要介绍Flutter一切皆widget但是不要将所有东西放入一个widget

作为 Flutter 开发人员，我相信您在您的开发生活中至少听说过这句流行的句子：“**一切都是widget”。这是 Flutter 的口头禅，它揭示了这个非常好的 SDK 的内在力量！

当我们在widgets目录中，我们可以看到很多小部件，如Padding，Align，SizedBox，等。我们通过组合它们来创建其他小部件，我发现这种方法可扩展、强大且易于理解。

但是当我阅读一些我在互联网上找到的或由新采用者编写的源代码时，有一件让我震惊的事情：拥有大量build**`**方法的趋势，实例化很多小部件！我发现这很难阅读、理解和维护。

作为软件开发人员，我们必须记住，软件的真实生活从第一次发布给用户开始。该软件的源代码将由其他人（包括您未来的您）阅读和维护，这就是为什么保持我们的代码简单、易于阅读和理解非常重要。

“小部件中的一切”的示例可以在Flutter 文档本身中找到。本教程的目标是展示如何构建此布局：

最终代码达到了它的目的：展示如何简单地创建上述布局。正如我们所见，甚至还有一些变量和方法可以为布局的各个部分提供语义。这是一个很好的观点，因为它使代码更容易理解。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {Widget titleSection = Container(padding: const EdgeInsets.all(32),child: Row(children: [Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Container(padding: const EdgeInsets.only(bottom: 8),child: Text('Oeschinen Lake Campground',style: TextStyle(fontWeight: FontWeight.bold,),),),Text('Kandersteg, Switzerland',style: TextStyle(color: Colors.grey[500],),),],),),Icon(Icons.star,color: Colors.red[500],),Text('41'),],),);Color color = Theme.of(context).primaryColor;Widget buttonSection = Container(child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [_buildButtonColumn(color, Icons.call, 'CALL'),_buildButtonColumn(color, Icons.near_me, 'ROUTE'),_buildButtonColumn(color, Icons.share, 'SHARE'),],),);Widget textSection = Container(padding: const EdgeInsets.all(32),child: Text('Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese ''Alps. Situated 1,578 meters above sea level, it is one of the ''larger Alpine Lakes. A gondola ride from Kandersteg, followed by a ''half-hour walk through pastures and pine forest, leads you to the ''lake, which warms to 20 degrees Celsius in the summer. Activities ''enjoyed here include rowing, and riding the summer toboggan run.',softWrap: true,),);return MaterialApp(title: 'Flutter layout demo',home: Scaffold(appBar: AppBar(title: Text('Flutter layout demo'),),body: ListView(children: [Image.asset('images/lake.jpg',width: 600,height: 240,fit: BoxFit.cover,),titleSection,buttonSection,textSection,],),),);}Column _buildButtonColumn(Color color, IconData icon, String label) {return Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: [Icon(icon, color: color),Container(margin: const EdgeInsets.only(top: 8),child: Text(label,style: TextStyle(fontSize: 12,fontWeight: FontWeight.w400,color: color,),),),],);}
}

事实上，情况可能更糟。这是我不喜欢的这段代码的典型多合一小部件版本：。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {Color color = Theme.of(context).primaryColor;return MaterialApp(title: 'Flutter layout demo',home: Scaffold(appBar: AppBar(title: Text('Flutter layout demo'),),body: ListView(children: [Image.asset('images/lake.jpg',width: 600,height: 240,fit: BoxFit.cover,),Container(padding: const EdgeInsets.all(32),child: Row(children: [Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Container(padding: const EdgeInsets.only(bottom: 8),child: Text('Oeschinen Lake Campground',style: TextStyle(fontWeight: FontWeight.bold,),),),Text('Kandersteg, Switzerland',style: TextStyle(color: Colors.grey[500],),),],),),Icon(Icons.star,color: Colors.red[500],),Text('41'),],),),Container(child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.call, color: color),Container(margin: const EdgeInsets.only(top: 8),child: Text('CALL',style: TextStyle(fontSize: 12,fontWeight: FontWeight.w400,color: color,),),),],),Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.near_me, color: color),Container(margin: const EdgeInsets.only(top: 8),child: Text('ROUTE',style: TextStyle(fontSize: 12,fontWeight: FontWeight.w400,color: color,),),),],),Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.share, color: color),Container(margin: const EdgeInsets.only(top: 8),child: Text('SHARE',style: TextStyle(fontSize: 12,fontWeight: FontWeight.w400,color: color,),),),],),],),),Container(padding: const EdgeInsets.all(32),child: Text('Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese ''Alps. Situated 1,578 meters above sea level, it is one of the ''larger Alpine Lakes. A gondola ride from Kandersteg, followed by a ''half-hour walk through pastures and pine forest, leads you to the ''lake, which warms to 20 degrees Celsius in the summer. Activities ''enjoyed here include rowing, and riding the summer toboggan run.',softWrap: true,),),],),),);}
}

在第二个版本中，我们有一个大build方法的小部件，它很难阅读、理解和维护。

现在让我们看看我将如何重写它：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter layout demo',home: const HomePage(),);}
}class HomePage extends StatelessWidget {const HomePage({Key key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter layout demo'),),body: ListView(children: [const _Header(),const _SubHeader(),const _Buttons(),const _Description(),],),);}
}class _Header extends StatelessWidget {const _Header({Key key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Image.asset('images/lake.jpg',width: 600,height: 240,fit: BoxFit.cover,);}
}class _SubHeader extends StatelessWidget {const _SubHeader({Key key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(32),child: Row(children: [Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [const _Title(),const _SubTitle(),],),),const _Likes(),],),);}
}class _Title extends StatelessWidget {const _Title({Key key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.only(bottom: 8),child: Text('Oeschinen Lake Campground',style: TextStyle(fontWeight: FontWeight.bold,),),);}
}class _SubTitle extends StatelessWidget {const _SubTitle({Key key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Text('Kandersteg, Switzerland',style: TextStyle(color: Colors.grey[500],),);}
}class _Likes extends StatelessWidget {const _Likes({Key key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Row(children: <Widget>[Icon(Icons.star,color: Colors.red[500],),Text('41'),],);}
}class _Buttons extends StatelessWidget {const _Buttons({Key key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [const _Button(icon: Icons.call, text: 'CALL'),const _Button(icon: Icons.share, text: 'ROUTE'),const _Button(icon: Icons.share, text: 'SHARE'),],),);}
}class _Button extends StatelessWidget {const _Button({Key key,@required this.icon,@required this.text,})  : assert(icon != null),assert(text != null),super(key: key);final IconData icon;final String text;@overrideWidget build(BuildContext context) {Color color = Theme.of(context).primaryColor;return Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: [Icon(icon, color: color),Container(margin: const EdgeInsets.only(top: 8),child: Text(text,style: TextStyle(fontSize: 12,fontWeight: FontWeight.w400,color: color,),),),],);}
}class _Description extends StatelessWidget {const _Description({Key key,}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(32),child: Text('Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese ''Alps. Situated 1,578 meters above sea level, it is one of the ''larger Alpine Lakes. A gondola ride from Kandersteg, followed by a ''half-hour walk through pastures and pine forest, leads you to the ''lake, which warms to 20 degrees Celsius in the summer. Activities ''enjoyed here include rowing, and riding the summer toboggan run.',softWrap: true,),);}
}

你不觉得这更易读吗？

Flutter一切皆widget但是不要将所有东西放入一个widget相关推荐

Android Studio Flutter 调试技巧 Flutter Inspector 提升你的维护开发效率轻松定位复杂嵌套Widget代码位置
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程 ...
【pyqt5学习】——containers相关控件（tab widget、scroll area、stack widget、tool box、MDI area、dock widget）
目录 1.tab widget 2.scroll area 2.1 使用方法 Step1.拖入QScrollArea Step2.改变widget控件布局 Step3.设置scrollAreaWi ...
从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）
(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的. 首先,什么是widget? 简单来说,就是一个 ...
Flutter每周一个Widget系列
最近看了油管上的Flutter的Widget Of The Week 系列通俗易懂还可以练习下英语听力,给大家转发下本文会持续更新...(有链接的就是已经更新上去的) #1 Introducing ...
QT：创建一个widget，包含源文件，头文件，以及ui文件
1. 安装QT 2. 在QT Welcome画面,点击 New Project 3. 选择Application--Qt Widgets Application 4. 按提示创建即可文件目录如下: ...
Qt练习UDP聊天软件
Qt练习聊天软件 1. 创建新项目 2. 创建对话列表 2.1 添加新文件,对话列表类DialogList 2.2 设计对话框列表UI 2.3 资源导入 2.4 设置窗体标题和图标 2.4.1设置标题 ...
（四）对话框QDialog 以及控件
介绍 Qt 中使用QDialog类实现对话框.就像主窗口一样,我们通常会设计一个类继承QDialog.QDialog(及其子类,以及所有Qt::Dialog类型的类)的对于其 parent 指针都有额 ...
跟我学flutter：细细品Widget（一）WidgetElement初识
前言 Everything's a widget! Widget Flutter 中 Widget是一个"描述一个UI元素的配置信息",Widget就是接受元素,而不是真是绘制的显 ...
flutter 局部状态和全局状态区别_给 Android 开发者的 Flutter 指南
这篇文档旨在帮助 Android 开发者利用既有的 Android 知识来通过 Flutter 开发移动应用.如果你了解 Android 框架的基本知识,你就可以使用这篇文档作为 Flutter 开发 ...

Flutter一切皆widget但是不要将所有东西放入一个widget

Flutter一切皆widget但是不要将所有东西放入一个widget相关推荐

最新文章

热门文章

Flutter一切皆widget但是不要将所有东西放入一个widget

insertAdIfNeeded();

Flutter一切皆widget但是不要将所有东西放入一个widget相关推荐

最新文章

热门文章