flutter 边框_Flutter作息定时器 app

背景知识视频教程

介绍

在以下屏幕截图中，您可以看到我们将在第一部分中构建的布局。 为了使您更容易理解该布局需要做什么，我添加了边框，以显示小部件将如何放置在屏幕上：

我相信构建此布局的最简单方法是结合使用列和行小部件。 此屏幕中的主容器窗口小部件将是一列，将空间分成三部分，如下所示：

1. 顶部的三个按钮：“工作”，“短暂休息”和“长时间休息”
2. 中间的计时器
3. 底部的两个按钮：“停止”和“重新启动”

在您最喜欢的编辑器中，创建一个新应用。

将新应用命名为production_timer

在main.dart文件中，删除示例代码。

输入以下代码：

</>

这段代码创建了一个基本的脚手架，这是我们大多数屏幕的基本布局，并在AppBar（我的工作计时器）中放置了一个标题，并在主体的中央放置了一个文本（同样是My Work Timer）。 结果应类似于以下屏幕截图：

接下来，让我们在main.dart文件底部为屏幕布局创建一个类，而不仅仅是返回Text。 我们将其称为TimerHomePage（）。 如果您使用的是VS Code，Android Studio或IntelliJ IDEA，则还可以使用stless快捷方式使框架编写代码的一部分。 MyApp类结束后，只需键入stless。

至于类名，让我们选择TimerHomePage。 最终结果应如下：

</>

在build（）方法中，不返回容器，而是从MyApp类中移动Scaffold：在appBar中，我们将显示应用程序的标题，在主体中将显示包含Column的Center小部件。 在TimerHomePage类中添加以下代码：

</>

我们可以通过调用刚刚创建的新类来简化MyApp类的build（）方法上的代码，如下所示：

home: TimerHomePage(),

如果您立即尝试使用该应用程序，则应该仍然像以前一样看到一个空白屏幕，显示“我的工作计时器”应用程序栏标题。

现在，我们准备开始在屏幕上放置小部件。 由于我们需要构建五个具有非常相似功能的按钮小部件，因此最好为这些小部件创建一个新类，以保持其余代码的简洁性并节省一些键入操作。

让我们在应用程序的lib文件夹中创建一个名为widgets.dart的新文件，如下所示：

在这里，我们将创建一个名为ProductivityButton的新无状态小部件。 这将显示四个字段：颜色，文本，大小和Callback方法，以及用于设置值的构造函数。 小部件的代码如下：

</>

您可能已经注意到，参数包含在大括号（{}）中，并带有@required批注。 这是因为我们在这里使用命名参数。 使用命名参数的目的是在调用函数并传递值时，还指定要设置的参数的名称。 例如，当创建ProductivityButton的实例时，可以使用语法ProductivityButton（颜色：Colors.blueAccent，文本：“ Hello World”，onPressed：doSomething，大小：150）。 由于命名参数是按名称引用的，因此可以按任何顺序使用它们。

命名参数是可选的，但是您可以使用@required注释对它们进行注释，以指示该参数是必需的。

现在，我们已经创建了通用按钮小部件，我们需要在屏幕上放置按钮的一些实例。

顶部按钮应放在屏幕顶部的单行中。 它们应占据所有可用的水平空间，并为边缘留出一些空间，并且它们应根据屏幕的大小和方向来改变其宽度。

创建一个临时的空方法，以使方法可以传递给按钮。 我们稍后将其删除。 在MyApp类的底部添加以下代码：

void emptyMethod() {}

在MyApp类的顶部，让我们为要在屏幕上使用的默认填充声明一个常量，如下所示：

final double defaultPadding = 5.0;

现在，让我们在屏幕上放置顶部按钮：我们需要在此处使用Row小部件，并将其作为Column小部件的第一个元素。 在Flutter中，实际上可以将“行”窗口小部件包含到“列”窗口小部件中，反之亦然。

我们希望按钮占用所有可用的水平空间。 为此，我们将使用扩展的小部件，该小部件在放置固定元素之后会占用列（或行）的所有可用空间。 每个按钮都有一个前导和尾随的填充，以在元素之间创建一些空间。 编写代码以将前三个按钮添加到屏幕，如下所示：

</>

尝试该应用。 前面的代码的结果应类似于以下屏幕截图：

计时器应放置在屏幕中间，并在放置大小固定的顶部和底部行之后占用所有剩余空间。 现在，我们将仅在“列”小部件下使用“ Hello”文本作为占位符。 请注意，在这种情况下，在列而不是行中使用了Expanded，因此它占用了所有垂直可用空间，如以下代码段所示：

Expanded(child: Text("Hello")),

然后，我们将剩余的两个按钮“停止”和“重新启动”放置在屏幕底部，它们还将占据所有水平空间，除了它们和屏幕边框之间的一些填充外，如以下代码所示 块：

Row(children: [
Padding(padding: EdgeInsets.all(defaultPadding),),
Expanded(child: ProductivityButton(color: Color(0xff212121),
text: 'Stop', onPressed: emptyMethod)),
Padding(padding: EdgeInsets.all(defaultPadding),),
Expanded(child: ProductivityButton(color: Color(0xff009688),
text: 'Restart', onPressed: emptyMethod)),
Padding(padding: EdgeInsets.all(defaultPadding),),
],)

最终结果应类似于以下屏幕截图：

在您的应用中安装percent_indicator软件包

在Flutter中使用流和异步编程

在主屏幕上显示时间：StreamBuilder

启用按钮

导航到设置路线

建立设置屏幕布局

使用shared_preferences读写应用程序数据

源代码