原文链接

| 作者：Guillaume Belouin

| 链接：blog.usejournal.com/flutter-goo…

直入主题吧。在本教程中，我们将使用 Flutter 来开发适用于 Android 和 iOS 的谷歌翻译应用程序。下面是程序的基本界面。

创建工程

要创建项目，我们必须运行 Android Studio 并单击 Start a new Flutter project，然后选择 Flutt2 er application。我们在表单中填写项目名称，flutter SDK 的路径，项目位置和描述，如下所示：

清空代码

创建项目后，我们首先清理 main.dart 文件中生成的代码。原本有一些代码，但我们希望尽可能简单。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Google Translate',theme: ThemeData(primarySwatch: Colors.blue,primaryColor: Colors.blue[600],),home: Scaffold(appBar: AppBar(title: Text('Google Translate'),elevation: 0.0,),body: Center(child: Text("We are going to translate everything !"),),),);}
}
复制代码

这段代码更干净且更容易理解。MaterialApp 类为我们的应用程序定义了设计外观。然后在 ThemeData 类中添加蓝色主题，以便更接近真实的 Google Translate 应用程序。Scaffold 创建应用程序的全局结构，它包含一个 AppBar 和一个 body。body 部分是我们在 AppBar 下显示应用程序内容的地方。

组织代码

我的代码以这种方式组织，包含 components、screens、models 和 services。这只是一种组织方式，还有其它的方式，就看自己是怎么考虑。test 文件夹也以相同方式组织。

创建第一个组件

我们将创建第一个组件，来显示我们输入的文本的语言，以及要翻译成的语言。

import 'package:flutter/material.dart';
class ChooseLanguage extends StatefulWidget {ChooseLanguage({Key key}) : super(key: key);@override_ChooseLanguageState createState() => _ChooseLanguageState();
}
class _ChooseLanguageState extends State<ChooseLanguage> {String _firstLanguage = "English";String _secondLanguage = "French";@overrideWidget build(BuildContext context) {return Container();}
}
复制代码

这段代码创建了一个 ChooseLanguage 组件，该组件定义了两个变量来用于表示选择的语言。

@override
Widget build(BuildContext context) {return Container(height: 55.0,decoration: BoxDecoration(color: Colors.white,border: Border(bottom: BorderSide(width: 0.5,color: Colors.grey[500],),),),);
}
复制代码

我们为容器定义特定高度和装饰以对组件进行样式设置。在 BoxDecoration 中，我们定义背景颜色和容器边框，以在组件底部显示一条分隔线。

接着我们将添加一个 Row 元素，它将帮助我们在一行上显示我们的 widgets。然后，我们可以确定如何对齐此行中的元素。实际上，row 有两个轴，主轴与 row 方向相同，横轴与其方向交叉。操纵这两个轴，我们可以很容易地以我们想要的方式显示我们的组件。以下模式显示了 widget 如何使用不同属性进行显示。

在 Flutter 中，可以很容易重建这个显示，我们所需要的只是一个 Row 元素，并定义主轴和横轴对齐方式。Expanded 元素将被添加到 Row 的子 widget 中。

@override
Widget build(BuildContext context) {return Container(...child: Row(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[...],),);
}
复制代码

现在是时候在我们的 Row 中添加 widget 了。我们需要在 InkWell 组件内简单地创建一个 Text 组件。InkWell 组件将在文本周围创建一个可单击的区域，并显示 splash 效果。

child: Row(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Expanded(child: Material(color: Colors.white,child: InkWell(onTap: () {},child: Center(child: Text(this._firstLanguage,style: TextStyle(color: Colors.blue[600],fontSize: 15.0,),),),),),),...Expanded(child: Material(color: Colors.white,child: InkWell(onTap: () {},child: Center(child: Text(this._secondLanguage,style: TextStyle(color: Colors.blue[600],fontSize: 15.0,),),),),),),],
),
复制代码

我们使用 Expanded 元素来构建包含白色背景颜色的 Text。InkWell 元素需要子树中的 Material 来显示 splash 效果。onTap 事件暂时不使用，我们稍后会在点击 Text 时更改语言。我们将 Text 显示在 Center 中，因为 Expanded 将占用所有空间，而我们希望将文本居中。最后，我们添加了变量 firstLanguage 和 secondLanguage 来显示语言。

最后一步是创建一个图标按钮，以像谷歌翻译应用程序中那样切换语言。这很简单，我们将创建一个带有白色背景的 Material，来包含我们的 IconButton。我们在 Flutter 库中已经存在的图标列表中选择我们的图标。我选择使用 Icons.compare_arrows，它与实际应用程序中的不完全相同。

<Widget>[Expanded(...),Material(color: Colors.white,child: IconButton(icon: Icon(Icons.compare_arrows,color: Colors.grey[700],),onPressed: () {},),),Expanded(...),
]
复制代码

现在我们的组件终于完成了，我们需要将它添加到页面中。然后我们应该能看到下面的效果。

import 'package:flutter/material.dart';import '../components/choose-language.dart';class HomePage extends StatefulWidget {HomePage({Key key, this.title}) : super(key: key);final String title;@override_HomePageState createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),elevation: 0.0,),body: Column(children: <Widget>[ChooseLanguage(),),);}
}
复制代码

翻译操作的 UI

我们现在需要创建组件来选择我们想要翻译的文本。在 Google 应用程序中，我们必须输入文本或使用其它的方式，例如拍照。我们遵循与 iOS 应用程序相同的设计。因此，我们将在本教程的下一部分中创建一个可点击的 widget。

我们将使用 Column 和 Row 创建具有此结构的组件以显示我们的 UI。Column 的工作方式与 Row 的工作方式相同，唯一的区别是它显示元素的方向。我们现在将在一个新组件中编写我们想要实现的结构。

import 'package:flutter/material.dart';class TranslateText extends StatefulWidget {TranslateText({Key key}) : super(key: key);@override_TranslateTextState createState() => _TranslateTextState();
}class _TranslateTextState extends State<TranslateText> {@overrideWidget build(BuildContext context) {return Card(color: Colors.white,margin: EdgeInsets.all(0.0),elevation: 2.0,child: Container(height: 150.0,child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Expanded(...),Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[Material(color: Colors.white,child: Column(children: <Widget>[...],),),],),],),),);}
}
复制代码

我们还为 Column 和 Row 定义了主轴和交叉轴的对齐方式。在这里，我们选择了 MainAxisAlignment.spaceBetween，因为我们希望在可点击的图标之间留出一些空间。

由于基本结构已完成，现在可以专注于输入部分。输入部分不是我们将在其中输入文本的 widget。在实际的应用中，当我们点击这部分时，会出现一个输入框来输入文本。

class _TranslateTextState extends State<TranslateText> {@overrideWidget build(BuildContext context) {return Card(...,child: Container(height: 150.0,child: Column(...,children: <Widget>[Expanded(child: InkWell(onTap: () {},child: Container(width: double.infinity,padding: EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0),child: Text("Enter text",style: TextStyle(color: Colors.grey[700],),),),),),Row(...),],),),);}
}
复制代码

这段代码与我们创建的第一个组件非常相似。是一个简单的 InkWell 内部包含一个 Text。我们将保留 onTap 函数，就像我们在创建的第一个组件中所做的那样。我们现在要在 Row 中创建可点击的图标。

我们将使用相同的代码来显示带有描述性文本的 4 个图标。我们可以在 Row 中编写相同 4 份代码，但是如果我们这样做，就会有很多重复代码。

使用此方法，在更改代码必须重复修改很多处。最好的解决方案是创建另一个组件，我们将使用不同的参数调用四次。

import 'package:flutter/material.dart';class ActionButton extends StatefulWidget {ActionButton({Key key, this.icon, this.text, this.imageIcon}) : super(key: key);final IconData icon;final AssetImage imageIcon;final String text;@override_ActionButtonState createState() => _ActionButtonState();
}class _ActionButtonState extends State<ActionButton> {@overrideWidget build(BuildContext context) {return Material(color: Colors.white,child: FlatButton(padding: EdgeInsets.only(left: 8.0,right: 8.0,top: 2.0,bottom: 2.0,),onPressed: () {},child: Column(children: <Widget>[...],),),);}
}
复制代码

创建可点击图标

我们使用了新的组件 ActionButton，与其他组件不同，我们添加了参数 icon，imageIcon 和 text。 我使用的一些图标不在谷歌的库中，因此我创建了自己的图标。

这就是我区分图标和 ImageIcon 的原因。我们将创建一个函数来显示 IconData 或 AssetImage 中的图标。

Widget _displayIcon() {if (this.widget.icon != null) {return Icon(this.widget.icon,size: 23.0,color: Colors.blue[800],);} else if (this.widget.imageIcon != null) {return ImageIcon(this.widget.imageIcon,size: 23.0,color: Colors.blue[800],);} else {return Container();}
}
复制代码

此函数检查 icon 或 imageIcon 变量是否为 null，当其中一个变量不为 null 时，我们将使用右侧组件显示图像。事实上，我们通过 Icon 组件显示 IconData。 AssetImage 基于 ImageIcon 组件。最后如果两者都为 null，则显示一个空容器。

@override
Widget build(BuildContext context) {return Material(color: Colors.white,child: FlatButton(...,child: Column(children: <Widget>[_displayIcon(),Text(this.widget.text,style: TextStyle(fontSize: 12),),],),),);
}
复制代码

我们在 Column 中添加了 _displayIcon 函数。它将使用我们要传递给组件的图标或图像图标中显示正确的 widget。我们现在可以在之前创建的 TranslateText 中调用我们的组件了。

import 'package:flutter/material.dart';import 'ActionButton.dart';class _TranslateTextState extends State<TranslateText> {@overrideWidget build(BuildContext context) {return Card(...,child: Container(height: 150.0,child: Column(...,children: <Widget>[Expanded(...,),Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[ActionButton(icon: Icons.camera_alt,text: "Camera",),ActionButton(imageIcon: AssetImage("assets/pen.png"),text: "Handwriting",),ActionButton(imageIcon: AssetImage("assets/conversation.png"),text: "Conversation",),ActionButton(icon: Icons.keyboard_voice,text: "Voice",),],),],),),);}
}
复制代码

我们导入组件，使用不同的参数调用 ActionButton 4 次，以便为每个 ActionButton 提供唯一的渲染。

添加图片资源(可选)

我在我们刚制作的一些按钮中添加了自己的图像，但我们需要更改根文件夹中的文件 pubspec.yaml 来引入这些图像。

flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.
  uses-material-design: true# To add assets to your application, add an assets section, like this:
  assets:
    - assets/
复制代码

我在 pubspec.yaml 文件中添加了 - assets /，并在我的图像的根文件夹中创建了一个 assets 文件夹。完成此操作后，可能需要重新运行该应用程序。最后，你可以像我之前那样调用你的图像，例如：AssetImage("assets/pen.png")。

如果您想了解有关 assert 的更多信息以及我们如何使用它们，请您阅读 Flutter 文档。

看看成果

第二个组件完成后，应用程序的 UI 现在几乎完成了。

显示最近翻译的列表

我们需要再创建一个新组件来显示最近的翻译列表。仍然使用相同的原理，我们将开发一个组合行和列的 widget。List 可以像 Column 一样显示我们的项目，不过更加自动化，而不是添加 n 次组件。此外，可以在 List 上滑动。

首先，我定义了一个 Translate 类，它由我们在列表中显示项目所需的元素组成。

class Translate {String text;String translatedText;bool isStarred;Translate(String text, String translated, bool isStarred) {this.text = text;this.translatedText = translated;this.isStarred = isStarred;}
}
复制代码

然后，我们可以创建一个名为 ListTranslate 的新组件。 我们在 itemCount 中定义 ListView 将显示的行数。在 itemBuilder 中，我们使用数组列表显示行。

import 'package:flutter/material.dart';
import '../models/translate.dart';class ListTranslate extends StatefulWidget {ListTranslate({Key key}) : super(key: key);@override_ListTranslateState createState() => _ListTranslateState();
}class _ListTranslateState extends State<ListTranslate> {List<Translate> _items = [];Widget _displayCard(int index) {return Card(child: Container(),);}@overrideWidget build(BuildContext context) {return Expanded(child: ListView.builder(itemCount: _items.length,itemBuilder: (BuildContext ctxt, int index) {return _displayCard(index);},),);}
}
复制代码

下一步是创建列表的项目，就像我们之前制作的草图一样。为此，我们将使用 Row 和 Column，就像我们为最后的组件所做的那样。不过，我们将添加一些样式，如边框半径，边距和填充，让它更好看。

Widget _displayCard(int index) {return Card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(0.0)),),margin: EdgeInsets.only(left: 8.0, right: 8.0, top: 0.5),child: Container(height: 80.0,padding: EdgeInsets.only(left: 16.0, top: 16.0, bottom: 16.0),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[Flexible(child: Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[Text(_items[index].text,style: TextStyle(fontWeight: FontWeight.w600,),maxLines: 1,overflow: TextOverflow.ellipsis,),Text(_items[index].translatedText,style: TextStyle(fontWeight: FontWeight.w400,),maxLines: 1,overflow: TextOverflow.ellipsis,),],),),IconButton(onPressed: () {},icon: Icon(Icons.star_border,size: 23.0,color: Colors.grey[700],),),],),),);
}
复制代码

这将显示列表中的每一行，以展示搜索的信息。Flexible 小部件将其高度和宽度扩展到最大值。由于我们在 Text 中添加了 maxLine 和 overflow，如果我们的文本太长，则会被截断。

IconButton(onPressed: () {},icon: Icon(_items[index].isStarred ? Icons.star : Icons.star_border,size: 23.0,color: _items[index].isStarred ? Colors.blue[600] : Colors.grey[700],),
),
复制代码

如果行的元素已加星标，则我们想要更改颜色和图标。我们使用三元运算符直接从列表信息中更改它。

List<Translate> _items = [Translate("yellowish","jaunâtre",true,),...,
];
复制代码

我们暂时使用一些信息填充列表项，以查看它的外观。现在，设计终于完成了，我们可以观察我们在整个教程期间所做的工作。

结论

这篇教程展示了使用 Flutter 为 Android 和 iOS 创建移动应用程序有多简单快捷。我们还发现一些部分看起来像 Web 开发中 flexbox。即使这是一个移动 App 的开发，Web 开发人员也可以快速地了解所做的事情。我们目前只做了一个没有任何功能的基本应用程序，但是编写下一个部分并不困难！

关注我们

欢迎关注我们的公众号：iOS-Tips，也欢迎加入我们的群组讨论问题。可以加微信 coldlight_hh/wsy9871 进入我们的 iOS/flutter 微信群。