用Flutter实现小Q聊天机器人（二）

用Flutter实现小Q聊天机器人（一）
用Flutter实现小Q聊天机器人（二）
用Flutter实现小Q聊天机器人（三）
用Flutter实现小Q聊天机器人（四）
用Flutter实现小Q聊天机器人（五）

GitHub：https://github.com/baiyuliang/Qrobot_Flutter

接上篇，我们新建一个Flutter Project：

flutter项目中有android、ios、lib等目录，可能刚开始有不少同学建完项目，就直奔android目录准备开发了，但其实，flutter的编程目录是在lib下的，所有编程文件后缀都为.dart，我们也可以把其看做安卓开发时.java以及java目录，可以更好的理解！

其中的pubspec.yaml这个文件很重要，类似于安卓开发时app目录下的build.gradle，我们在引用一些第三方的工具或插件时都要在该文件中声明，如下图：

引入后点击右上角的Pakage get，就可以获取该包，然后再项目中引入该包路径，就可以使用里面提供的方法了。

在新建的flutter项目的lib目录下，都会有一个mian.dart，这个就是程序的入口，里面提供的有示例，在我们着手开始写代码之前，还是有必要去了解一下Flutter UI方面的一些知识。

dart导入包跟java一样，用import关键字，当你输入import时，AS会自动提示很方便；
如java一样，dart同样用class声明类，extends继承类；
java的精髓是万物皆对象，flutter的精髓是万物皆组件，所以你在开发flutter时会经常用到Widget；
Widget可以理解为安卓中的View；
更多内容可以去官网学习

我们在布局一个界面的UI时经常要用到两个类：StatelessWidget和StatefulWidget：

StatelessWidget表示静态页面，就像我们常说的写死的，不会有改变的；而StatefulWidget是动态的，也就是UI会根据数据的改变做出动态响应的；我们看到主程序里面第一个组类就是StatelessWidget：

void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}
}

build方法中返回的Widget 就像是该界面整个UI的一个最顶级的ViewGroup，像一个底板，然后里面的接下来的所有组件都会在这个group中一层套一层的布局；另外，这个结构看起来似曾相识啊：

public class MainActivity extends FlutterActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);}
}

区别就是，安卓中我们用xml布局，而Flutter中我们要用代码布局，UI中的所有组件我们都要用代码一个一个实现，是不是有种想放弃的感觉，哈哈！
MaterialApp就是Material风格的app了，做安卓开发的再熟悉不过了，里面的属性大家可以自行查看官网说明，重点说home这个属性：字面意思，家，就是这个界面的家，在home中也就需要我们根据UI设计去一点一点布局了；

 home: MyHomePage(title: 'Flutter Demo Home Page'),

MyHomePage继承了StatefulWidget，说明这个界面是一个动态的；我们需要知道，安卓开发中，我们可以直接去操控view，改变view的属性，但Flutter中却不能，我们需要通过数据的改变去重绘UI，也就是我们只能改变数据，而不能直接操控组件，跟微信小程序开发是一样的道理；
而实现要实现动态界面，StatefulWidget和State两个类是紧紧相连的：

class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(),body: Center());}
}

MyHomePage 重写createState方法，返回State（_MyHomePageState ），接下来该界面所使用的变量，方法等都可以在_MyHomePageState 类中声明，改变UI则可以通过方法 setState：

class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}

而真正布局的开始，则是在_MyHomePageState 的Widget build(BuildContext context)方法中：

  Widget build(BuildContext context) {return Scaffold(appBar: AppBar(),body: Center());}

Scaffold 实现了Material风格的布局及组件，仅从布局意义上讲，我们仍然可以把其理解为一个ViewGroup，主要属性说明：

appBar：Material 的标题栏；
body：UI主要内容（标题栏以下）
floatingActionButton：在 Material 中定义的一个功能按钮；
persistentFooterButtons：固定在下方显示的按钮；
drawer：侧边栏；
bottomNavigationBar：底部导航栏；
backgroundColor：背景颜色；
resizeToAvoidBottomPadding：控制界面内容 body是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容；

对于组件的声明我们可以前面加上new如： new Text(‘标题’)，也可以不加如：Text(‘标题’)，所以大家在看到不同项目中有的有new，有的没有时不要疑惑，没有任何区别；接下来，我们来了解一下常用的一些组件：

文本：Text;
输入框：TextField；
列表：ListView；
divider：Divider；
边框：BoxDecoration；
包裹容器：Container；
水平布局容器：Row；
垂直布局容器：Column；
可伸缩布局容器：Flexible；
图片：Image；

等等…不在过多罗列，各种组件都有其对应的各种属性如：margin，padding，width，heigth等等；

下面我们来实现一个上面是内容，底部是输入框的这么一个界面：

class _MyHomePageState extends State<MyHomePage> {TextEditingController _textController = new TextEditingController();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: new Column(children: <Widget>[new Text("Hello World"),new Divider(height: 1.0), //分界线new TextField(controller: _textController,decoration: new InputDecoration.collapsed(hintText: '请输入消息'),)]));}
}

先用最简单的实现，首先思考布局，上面是内容，下面是输入框，这类似于LinlearLayout的垂直布局，那么在flutter中我们可以用Column来实现，需要注意的是：Column和Row容器中可以有多个子Widget，也就相当于可以有多个子View，类似于LinearLayout，RelayLayout等，对应的属性是children，字面意思：孩子们，而像Container，Flexible等容器中只能有一个组件，类似于ScrollView，对应的属性是child，对比children意思一目了然，而Text，Image等组件跟安卓中想同，为最小View，他们中不能再有组件；

另外注意组件的书写方式：

child：组件（属性：xx,属性：xx，
），

 children: <Widget>[组件（属性：xx,child：组件（属性：xx,child：xx，)，），组件（属性：xx,属性：xx，），
]

所有属性以及组件间用逗号“,”隔开，并注意属性及组件的层次递进；

输入框TextField实现时需要一个控制器TextEditingController，再类中声明一下即可，过后我们就可以用这个对象实现获取输入框中的内容，清空输入框的内容等一系列操作了；

运行程序，效果如下：

本篇讲述了flutrer项目结构，布局规则，及不同组件的作用及使用方法，大家对Flutter项目的开发有一个最基本的了解之后，下一篇将继续讲解如何实现一个Flutter版的聊天机器人。

用Flutter实现小Q聊天机器人（二）相关推荐

用Flutter实现小Q聊天机器人（四）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Flutter实现小Q聊天机器人（五）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Flutter实现小Q聊天机器人（三）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用React实现小Q聊天机器人
前几篇讲过用Vue实现小Q聊天机器人,既然用了Vue,那React自然也是少不了的,本项目实现效果与vue实现的效果完全一样: GitHub源码:https://github.com/baiyulia ...
用Vue实现小Q聊天机器人（二）
GitHub:https://github.com/baiyuliang/Qrobot_Vue 项目完整结构: 接下来,开始着手修改刚刚创建完成的项目! 打开main.js,引入相关插件,本项目的网络 ...
NLP微信小程序聊天机器人
今天把两年前大二时候的小程序又拿来玩了一下,决定开源这个小项目一个NLP微信小程序聊天机器人,前端就一个页面,后端是php的,可以接图灵等等各种api,也可以自己写个python的接口做NLP算法测 ...
使用TensorFlow.js的AI聊天机器人二：训练Trivia Expert AI
目录设置TensorFlow.js代码 TriviaQA数据集单词嵌入和标记训练AI模型聊天机器人(Trivia Chatbot)在行动终点线下一步是什么? 下载项目文件-9.9 MB T ...
自己动手做聊天机器人二十九-重磅：近1GB的三千万聊天语料供出
Reference: http://www.shareditor.com/blogshow/?blogId=112 经过半个月的倾力打造,建设好的聊天语料库包含三千多万条简体中文高质量聊天语料,近1G ...
QQ 聊天机器人小薇 2.1.0 发布！
本次发布加入了支持茉莉机器人,并且更容易搭建开发环境,在线显示登录二维码~ 简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 QQ 群消息 ...

用Flutter实现小Q聊天机器人（二）

用Flutter实现小Q聊天机器人（二）相关推荐

最新文章

热门文章