weixin_34370347
weixin_34370347

Flutter学习之入门和体验

一、前言

1.什么是Flutter

上周我的一位微信好友问我有没有学Flutter，我回答说还没真正学，他说应该要接触一下。对于新技术的诞生，我始终保持敬畏之心，和另一位大学舍友聊了当时如何入坑Android的经历，才发现自己的学习方式和路线有很多的问题，知识点很零乱，知识没有系统化，不多说了，后面学习新的知识一定要从“碎片化”到“整体化”。2018年2月，在世界移动大会上，Google发布了Flutter的第一个beta版本，2018年6月11日发布首个预览版，在2018年12月05日北京时间凌晨1点45分，在Flutter Live上，谷歌Flutter团队推出Flutter1.0，Flutter1.0版本是UI工具包的第一个稳定版本，在2019年2月27日世界移动通信大会上Google推出1.2版本，带来全新的Web开发工具。另外今日头条团队即将开源让Flutter真正支持View级别的混合开发(上层Flutter Framework引入Widget/LayerTree等概念自己实现了界面描述框架，下层Flutter Engine把LayerTree用OpenGL渲染成用户界面)，闲鱼团队也开源了基于 Redux数据管理的组装式Flutter应用框架。什么是Flutter呢？Flutter是一个跨平台的免费开源的移动UI框架，是Google的移动应用SDK，用于在极短时间内在iOS和Android平台上创建高质量的原生体验，简而言之就是在iOS下和Android下共用一套代码，一套代码就能在两个操作系统下运行，其官方编程语言是是Dart，学习这门语言很快就上手。Flutter提供很多丰富的UI组件库，开发者可以快速开发出灵活的UI界面，另外Flutter已经加入Material Design组件大家庭中，也就是说Flutter可以使用Material Theming和Material 组件，可以相信未来会有更多的创意设计UI风格会涌现。

2.Flutter的特性

  1. 快速开发，Flutter的热重载可帮助快速轻松试验，构建UI，添加功能和快速修复错误，在iOS和Android的模拟器和硬件上体验亚秒级重载同时不会丢失状态，这里直接引用官方的图：
  2. 机具表现力和美观UI，Flutter内置的Material Design和Cupertino（iOS风格）的部件、丰富的手势API、自然平滑的滑动和不同的平台表现来提升用户体验，直接看下图：
  3. 现代化响应式框架，使用现代化响应式框架和丰富的平台、布局和基础组件来构建用户界面，使用功能强大且灵活的API（针对2D，动画，手势，动效等）解决复杂的用户界面设计。
class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // Tells the Flutter framework that state has changed,
    // so the framework can run build() and update the display.
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // This method is rerun every time setState is called.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Row(
      children: [
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}
复制代码
  1. 使用平台原生功能及SDK，通过平台API，第三方SDK和原生代码让英语具有强大的扩展性，Flutter允许重复使用现有的Java，Swift和Object代码，并访问iOS和Android上的原生功能和SDK，例如下图获取手机电量数值：
Future getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}
复制代码
  1. 统一应用开发体验：Flutter丰富的工具库可以让开发者轻松在iOS和Android设备上实现自己的想法，可以充分利用现有的大部分Java、Object-C或者Swift代码。

3.2019年Flutter产品线

2019年一月底，Flutter团队公布了2019年Flutter的产品线，为以下几点确定了明确的计划：

  1. 核心基础：Bug修复，性能调优，内存诊断工具优化，改进测试流程。
  2. 生态系统：更好的C/C++库支持，推进官方开发/维护的Packages达到与核心框架相同质量和完整性。
  3. 动态更新：在国内，这是必不可少的，提供Android上的动态修复：代码更新从服务器推送到Android应用里，也就是热更新。
  4. 支持开发移动端web应用。 并且Flutte UX研究团队会定期根据用户反馈来助力打造更优的Flutter，根据用户反馈来调整开发重点，可见Flutter UX团队的用心和付出程度，今年拭目以待。

二、Flutter架构

1.架构图

Flutter框架从到下包含三部分：函数式响应的Framework(Dart)，Engine(C++),Embedder(Platform Specific)。下面直接上图：

  • FrameWork是用Dart实现，提供了Material风格的小部件、Cupertino风格的小部件(用于iOS)、文本图像按钮组件、动画、手势等。
  • Engine时用C++实现的，上图详细了，实际包含三部分：Skia、Dart、Text。Skia是一个开源的2D图形库，为硬件和软件平台提供API。Dart包括Dart运行时和垃圾回收。Flutter在调试模式下运行，由JIT(Just in Time，运行时编译，边运行边编译)支持，如果在发布模式下，则是通过AOT(Ahead of Time，运行前编译，普通的静态编译)将Dart代码编译原生的"arm"代码。Text是指文本渲染库。
  • Embedder是指嵌入器，就是可将Flutter嵌入到各种平台中，它的主要任务是渲染Surface设置、线程设置和插件。

2.渲染过程

这里结合上面两张图来看，可以知道，当需要更新UI的时候，Framework通知Engine，Engine会等到下个Vsync信号到达的时候，会通知Framework，然后Framework会进行Animate，Build，Layout，Paint，最后生成Layer。Compositor 把所有的Layer组合成Scene，再通过Skia进行处理，最后Engine通过GPU GI接口提交数据给GPU，GPU最后经过处理后在显示器显示。上面简单了解什么Flutter，Flutter特性和框架，有了初步的了解，下面就开始一步一步实现第一个Flutter应用。

三、Flutter环境搭建

1.获取Flutter SDK

务必电脑安装git，本文是在Windows环境下配置的，MAC下配置环境流程是一致的。首先要获取Flutter SDK，使用git去克隆仓库然后添加Flutter工具到自己的环境变量，运行flutter doctor来显示剩下需要安装的依赖，国内用户最好配置一下两个环境变量：

PUB_HOSTED_URL=https://pub.flutter-io.cn
复制代码

如下图所示： 

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

如图所示：

因为这次我第一次在电脑上安装Flutter，所以就要克隆这个远程仓库，我在电脑F盘下执行下面git命令： 

$ git clone -b beta https://github.com/flutter/flutter.git
复制代码

如图所示：

下载比较慢，等了十多分钟才下载完。下载完看到F盘果然有一个名字叫flutter的文件夹，接着将克隆下来的项目bin目录配置到环境变量Path去，因为我是下载到F盘，所以下图路径是： 如果需要更新flutter的sdk，在命令行执行 flutter upgrade命令即可。

2.运行flutter doctor

打开一个新的命令提示符窗口，运行下面命令flutter doctor，看是否需要安装任何依赖项来完成安装，这个命令会检测环境和在终端生成报告，Dart SDK和Flutter捆绑在一起，没必要单独去安装Dart。初次运行它会下载自己的依赖库并且自行编译，可能比较慢。后续运行flutter命令就会很快。这里注意，如果CMD窗口显示乱码问题，下面是解决方案：

  • Win+R进入进入CMD命令行输入regedit进入注册表
  • 找到 HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe 如果该项下已存在CodePage项，则把值改为十进制”65001”，如果不存在，在该项下新建一个 DWORD（32位值），命名为“CodePage”，值设为“65001”
  • 重启cmd后生效 输入flutter doctor运行结果截图所示： 注意看到Android toolchain选项 意思是得要运行flutter doctor --android-licenses同意协议才可以安装Android工具链。输入flutter doctor --android-licenses一直按y即可。最后重新输入flutter doctor，结果如下图： 从上面运行结果可以知道一下信息：
  • Flutter的版本和渠道已经安装
  • Flutter运行需要的Android工具链已安装
  • Android studio开发工具已经安装
  • flutter插件和Dart插件没有安装（在Android stdio安装下面会说）
  • 没有连接手机

3.搭建Android Studio开发环境

在Android Studio--File--Settings --plugins搜索Flutter即可，如下图：

点击安装的时候会弹出一下提示框： 大概意思是安装Flutter插件需要Dart插件的支持，就是需要和Dart插件一起安装，安装完成后，重启开发工具，就可以新建和开发程序了。 注意：如果提示cannot download xxxx的话去 plugins.jetbrains.com/搜索插件名字，下载对应的插件后解压到对应的位置，如下图： 或者点击插件本地安装： 最后重启自己的编译器即可。

四、创建第一个Flutter程序

1.New Flutter Application

因为现在是要创建应用程序，因此在Create New Flutter Project下选择Flutter Application：

2.配置项目信息

在下一个页面输入项目名字，配置Flutter SDK目录，项目存放的路径，项目的描述，公司的域名，项目的包名如图所示：

最后点击finish等待Android Studio完成所要创建的Flutter项目了。

3.项目目录

项目建立完成后，编辑器给我们生成的目录如下：

  • android：Andorid相关代码目录，里面代码配置和单独创建Andorid项目有些不一样
  • ios：iOS相关代码目录，存放Flutter与ios原生交互的一些代码
  • lib：应用源文件，dart文件，核心文件，可以创建不同的文件夹，存放不同文件
  • test：测试文件
  • .gitignore：忽略文件，记录一些不需要关注变更记录的文件，就是不添加到版本记录里面
  • .metadata：记录一些Flutter project一些基本信息，如版本，项目类型
  • .packages:记录一些lib文件的路径
  • .iml：是由IntelliJ IDEA创建的模块文件，用于开发Java应用程序的IDE。它存储有关开发模块的信息，该模块可能是Java，Plugin，Android或Maven组件; 保存模块路径，依赖关系和其他设置
  • pubspec.lock：这是根据当前项目依赖所生成的文件，记录当前使用的依赖版本
  • pubspec.yaml：包含Flutter应用程序的包数据，这个是配置依赖项的文件，比如配置远程public仓库的依赖项，或者本地资源（图片，音视频）
  • README.md：根据意思就是“读我”，这里会记录一些项目结构，详细信息，帮助信息，了解一个项目都是通常通过这个文件入手。

总体来看和原生Android的工程结构不一样了，因为代码都是在lib目录完成的，所以不能用Android多module多lib结构去创建module和lib，除非要用到原生交互的代码，可以在android目录里面去写，然后在lib目录里面去引用。相对Android开发者而言，多了ios目录，ios开发者而言，多了android目录，其他文件上面有具体详细说明。因为lib目录是开发者最主要关注的，打开lib目录，发现有个后缀是dart的文件，里面内容都是用dart语法来写的，还发现有void main() => runApp(MyApp());main（）函数对于学过java而言都非常清晰，这个应该是入口函数，另外发现StatelessWidget，StatefulWidget一些小控件，这里想应该是UI组件吧。这里先不管那么多，直接点击运行图标，运行效果图如下：

走到这里，说明项目环境配置成功，并成功运行第一个简单的程序。

五、编写第一个应用

1.编写“Hello world”

现在还是按照新手走，先自己撸个“Hello world”出来吧。把main.dart中所有代码去掉，替换下面代码，屏幕中心显示Hello World：

import 'package:flutter/material.dart';

//这个是Dart中单行函数或者方法的简写
void main() => runApp(MyApp());

//程序继承StatelessWidget，该应用程序成为一个widget，在Flutter中，大多数东西都是widget
class MyApp extends StatelessWidget {
  // 这个是应用的根widget
  @override
  Widget build(BuildContext context) {
    //注意：一个app只能有一个MaterialApp
    return MaterialApp(
      //标题栏的名字
      title: 'Hello Flutter',
      //这个是Material library提供的一个widget，它提供了默认的导航栏、标题栏
      //包含主屏幕的widget树的body属性
      home:new Scaffold(
        appBar:new AppBar(
          title:const Text("Weclome to Flutter"),
        ),
        body:const Center(
          child:const Text("Hello World"),
        ),
    ),
    );
  }
}
复制代码

Android模拟器运行效果如下：

iOS模拟器运行效果如下： 感觉在iOS运行效果比Android上好多了。看到这里发现Android并不是沉浸式状态栏，而iOS默认就是沉浸式了，那有没有办法也能让Android版本也做成沉浸式呢，答案是肯定有的，一开始我的思路是应该是在main方法里判断是不是Android版本，如果是就设置，网上找里找，这种方法果然可行：

  1. 首先先导包：
import 'dart:io';
import 'package:flutter/services.dart';
复制代码
  1. 在mian方法根据Android版本做设置：
//入口函数
void main() {
  //MaterialApp组件渲染后
  runApp(MyApp());
  //判断如果是Android版本的话 设置Android状态栏透明沉浸式
  if(Platform.isAndroid){
    //写在组件渲染之后，是为了在渲染后进行设置赋值，覆盖状态栏，写在渲染之前对MaterialApp组件会覆盖这个值。
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}
复制代码

还有另外一种方法，因为Flutter主入口只有一个MainActivity，也就是说所有的Flutter页面都会运行这个MainActivity,那我们只需要在这个主入口判断一下版本号然后将状态栏颜色设置成透明，具体位置在android->app->src->main->xxx->MainActivity:

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //设置状态栏透明
    if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP)
    {//API>21,设置状态栏颜色透明
      getWindow().setStatusBarColor(0);
    }
    GeneratedPluginRegistrant.registerWith(this);
  }
}
复制代码

最终效果Android和iOS下运行如下：

这样效果好很多了。另外发现，Android下的标题栏是左边对齐的，那怎么做成iOS那样标题栏在中间呢？很简单，在AppBar加上Center widget就可以了，代码如下： 

appBar:new AppBar(
          //ios和android标题栏统一在中间
          title:new Center(child :const Text("Weclome to Flutter")),

        ),
复制代码

最终效果如下：

这样真正做到了iOS和Android版本统一了。上面代码app继承了StatelessWidget，这样本身也成为了widget，在Flutter中， 很多时候一切都看作是widget，layout和padding等等。上面例子结构很清晰明了，就是StatelessWidget类包含了（应用栏）Appbar，和构成主页面widget树结构的body属性。而body的widget又包含了一个Center widget，Center widget又包含一个Text子widget，Center widget可以将子widget对齐到屏幕中心。

2.使用外部package

现在，通过在pubspec.yaml文件配置依赖项，去依赖一个提供英文单词的包，在pub.dartlang.org/flutter/这个网站可以找到很多开源软件包，可以搜索指定的软件包查看对应版本。

  1. pubspec文件管理着Flutter应用程序的静态资源文件，那在pubspec.yaml文件，将english_words(3.1.5版本)添加到依赖项，这里要注意：和^之间是有空格的，不能会出错。如下所示：
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  english_words: ^3.1.5
复制代码
  1. 这时候点击编辑器的右上角的Packages get，就是把package拉取到项目中去，并且可以看到控制台输出：Runningflutter packages getin flutter_demo...
  2. 在lib/main.dart下，将english_words导入，显示灰色证明你导入的库没有使用，如下图所示：
  3. 改用英文单词的package来生成文本，代码改为如下：
//程序继承StatelessWidget，该应用程序成为一个widget，在Flutter中，大多数东西都是widget
class MyApp extends StatelessWidget {
  // 这个是应用的根widget
  @override
  Widget build(BuildContext context) {
    //随机生成函数
    var wordPair = new WordPair.random();
    return MaterialApp(
      //标题栏的名字
      title: 'Hello Flutter',
      //这个是Material library提供的一个widget，它提供了默认的导航栏、标题栏
      //包含主屏幕的widget树的body属性
      home:new Scaffold(
        appBar:new AppBar(
          //ios和android标题栏统一在中间
          title: new Center(child: const Text("Weclome to Flutter")),
        ),
        body:new Center(
          //使用随机生成的英文单词 为什么不能const呢 因为 内容发生变化 const是用来修饰常量的
          child:new Text(wordPair.asPascalCase),
        ),
    ),
    );
  }
}
复制代码

注意的是Center widget 和 Text widget要用new 来创建，因为内容修改了，并不是常量了，这时候按保存就可以看到新的单词出现在屏幕中间文本了。

3.添加有状态的widget

上面MyApp是继承StatelessWidget，StatelessWidget是无状态的也是不可控的，意思是其属性是不能改变的，所有的值都是最终的。在平时开发中，很多控件都需要根据特定场景改变自身的状态，那么Flutter有没有提供有状态的widget呢？答案肯定是有的，Statefulwidget是有状态的，在其生命周期保持的状态可能会变化，实现一个有状态的widget至少需要两个类：StatefulWidgets类和State类。

  1. 添加RandomWordsWidget类，这个类继承StatefulWidget类，这个类添加到main.dart文件最底下：
//创建有状态的widget
class RandomWordsWidget extends StatefulWidget{

  @override
  State createState() {
    return new RandomWordsState();
  }
}
复制代码
  1. 添加RandomWordsState了，这个类会保存RandomWordsWidget的状态，后面会保存一些特殊不同状态下的词组，并且在里面添加build方法，不然会报错，把生成单词的代码放到这个build类中去，如下图：
//用来保存RandomWords widget的状态
class RandomWordsState extends State<RandomWordsWidget>{
  @override
  Widget build(BuildContext buildContext){
    var wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);

  }
}
复制代码
  1. MyApp下改成创建RandomWordsWidget即可：
//程序继承StatelessWidget，该应用程序成为一个widget，在Flutter中，大多数东西都是widget
class MyApp extends StatelessWidget {
  // 这个是应用的根widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //标题栏的名字
      title: 'Hello Flutter',
      //这个是Material library提供的一个widget，它提供了默认的导航栏、标题栏
      //包含主屏幕的widget树的body属性
      home:new Scaffold(
        appBar:new AppBar(
          //ios和android标题栏统一在中间
          title: new Center(child: const Text("Weclome to Flutter")),
        ),
        body:new Center(
          child:new RandomWordsWidget()
        ),
    ),
    );
  }

复制代码

这时候运行的效果还是跟之前一样，不过实现方式不一样。

4.创建ListView

下面创建一个滑动组件ListView，开发者接触最多应该是这个滑动组件，下面实现当用户滑动列表的时候，ListView会不断增长，不断显示新的单词。

  1. 在RandomWordsState这个类创建一个数组列表，用来保存词组，这个变量以下划线为开头，Dart语言中下划线前缀是表示强制私有：
final _normalWords = [];
复制代码
  1. 在RandomWordsState类添加_buildNormalWords方法，用于构建一个ListView，ListView提供了itemBuilder属性，这是一个工厂builder作为匿名函数进行回调，这个函数需要传入两个参数，一个是BuildContext上下文和行迭代器。对于ListView每一行都会执行这个函数调用，这里想想好像是平时Android开发中ListView创建添加item的方法。
//创建填充单词的ListView
  Widget _buildNormalWorlds() {
    //内容上下16dp
    return new ListView.builder(
        padding: const EdgeInsets.fromLTRB(0, 16, 0, 16),
        //每个单词都会条约一次itemBuilder，然后将单词添加到ListTile中
        itemBuilder: (context, i) {
          //首先创建10条单词
          if (i >= _normalWords.length) {
            //接着再生成10个单词，添加到列表上
            _normalWords.addAll(generateWordPairs().take(10));
          }
          return _buildItem(_normalWords[i]);
        });
  }
复制代码
  1. 因为ListView是需要设置Item项的样式，这里同样在RandomWordsState里添加_buildItem方法，用来加载指定数据，这里指定内容居中显示：
  //设置每个item项的内容和样式
  Widget _buildItem(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        textAlign: TextAlign.center,
      ),
    );
  }
复制代码
  1. 更改RandomWordsState的build方法，增加_buildNormalWords方法的调用，不是直接用单生成库，代方法如下：
  Widget build(BuildContext buildContext) {
//    var wordPair = new WordPair.random();删掉
//    return new Text(wordPair.asPascalCase);删掉
      return new Scaffold(
        appBar: new AppBar(
          title: new Center(child: const Text("Weclome to Flutter")),
        ),
        body:_buildNormalWorlds(),
      );
  }
复制代码
  1. 更改MyApp的build方法，因为标题的设置放在了RandomWordsState里了，所以不需要再额外添加，并将home变成RandomWords widget，代码一下子简洁很多如下：
//程序继承StatelessWidget，该应用程序成为一个widget，在Flutter中，大多数东西都是widget
class MyApp extends StatelessWidget {
  // 这个是应用的根widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home:new RandomWordsWidget(),
    );
  }
}
复制代码

最终效果如图所示

  1. 下面添加分割线，让UI更美观，这里通过因为计算机里循环开始都是从0开始的，我_buildNormalWorlds方法里判断是奇数项的话就构造出分割线添加到ListView，这里注意分割线也是一项，那么生成单词的时候要稍微处理下，具体代码如下：
//创建填充单词的ListView
  Widget _buildNormalWorlds() {
    //内容上下16dp
    return new ListView.builder(
        padding: const EdgeInsets.fromLTRB(0, 16, 0, 16),
        //每个单词都会条约一次itemBuilder，然后将单词添加到ListTile中
        itemBuilder: (context, i) {
          //添加分割线
          //奇数行，会添加一个分割线的widget，分割上下单词
          //偶数行，就正常构造添加ListTitle row
          //构造一像素的分割线 也可以自己去定义宽高
          //i.isOdd判断是否奇数，奇数行添加分割线
          if(i.isOdd){
            //注意：这里执行后会跳出循环
            return new Divider();
          }

          //这里对2求商，就是计算出ListView中减去分割线后的实际单词数量
          //如 i为 1，2，3，4，5，那么商结果是0，1，1，2，2
          //1 除以 2商是0 2除以2商是1 以此类推
          final int index = i ~/2;

          //首先创建10条单词
          if (index >= _normalWords.length) {
            //接着再生成10个单词，添加到列表上
            _normalWords.addAll(generateWordPairs().take(10));
          }
          return _buildItem(_normalWords[index]);
        });
  }
复制代码

实际效果如下：

5.添加交互

  1. 在RandomWordsState里添加一个_collected的Set集合，这个集合用来存放收藏后的单词，用Set的原因是Set本身的特性不允许元素有重复值：
final Set _collected = new Set();
复制代码
  1. 在_buildItem方法中添加isCollected来检查单词是否添加到收藏里
final bool isCollected = _collected.contains(pair);
复制代码
  1. 在_buildItem以后置属性来添加一个❤️图标到ListTiles，matrial包下有默认的❤️图标，这里就设置下颜色就可以，代码如下：
return new ListTile(
      title: new Text(
        pair.asPascalCase,
        textAlign: TextAlign.center,
      ),
      //trailing 是后置图标属性
      trailing: new Icon(
        //material 包下 icons.dart
        isCollected ? Icons.favorite : Icons.favorite_border,
        //图标颜色设置
        color:isCollected ? Colors.red : null,
      ),
    );
复制代码

运行结果后发现❤️型图标添加到每一行最右边处。

  1. 下面增加点击事件，当点击列表时，如果单词没被收藏，那么就添加收藏，并将心形图标改为收藏后的图标，如果单词被收藏了，那么就移除处收藏，并将心形图标变为默认的心形图标,代码如下：
      //trailing 是后置图标属性
      trailing: new Icon(
        //material 包下 icons.dart
        isCollected ? Icons.favorite : Icons.favorite_border,
        //图标颜色设置
        color:isCollected ? Colors.red : null,
      ),

      //item的点击事件属性
      onTap:(){
        //状态设置
        setState(() {
          //如果收藏了
          if(isCollected){
            //那就将set集合里移除
            _collected.remove(pair);
          } else {
            //添加
            _collected.add(pair);
          }
        });

      }
复制代码

效果如下：

  1. 下面实现跳转新页面，首先添加一个收藏单词页面，在Flutter中，导航器管理应用程序的路由栈，什么是路由栈呢？路由栈就是用栈来管理路由（页面）。就是我现在要打开一个新的页面，那么这个新的页面就会压入路由栈中，如果我现在在新的页面，点击返回到上一个页面，那么路由栈会弹出这个新页面路由，将显示返回到前一个页面，这里想想和Android原生用栈管理页面的方法一样，首先在首页面增加跳转新页面图标，代码如下：
Widget build(BuildContext buildContext) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Center(child: const Text("Weclome to Flutter")),
          //增加图标和点击事件动作 Icons.list是icon的类型 onPressed添加点击事件 点击会执行_collectWordsPage方法
          actions:[
            new IconButton(icon: const Icon(Icons.list),onPressed: _collectWordsPage),
          ],

        ),
        body:_buildNormalWorlds(),
      );
  }
复制代码

实际运行后，AppBar导航栏最右边的位置添加了一个图标，这时候点击没有任何反应，因为_collectWordsPage没有任何代码，下面添加跳转到新页面的实现。

  1. 在_collectWordsPage添加Navigator.push，这个简单易懂，就是会把页面入栈
  //跳转新页面开始
  void _collectWordsPage(){
       Navigator.of(context).push(
         
         
       );
  }
复制代码
  1. 下面添加MaterialPageRoute和builder，添加构建ListTile行的代码,并添加项与项之间的分割线，最后通过toList来转换。MaterialPageRoute是一种模态路由，可以通过平台自适应来切换屏幕，Android而言，页面推送过渡向上滑动页面，淡入淡出，弹出过渡则是向下滑动页面。IOS而言，页面从右侧滑入，反向弹出，当另一个页面进入覆盖时，该页面向左移动。
  //跳转新页面开始
  void _collectWordsPage() {
    Navigator.of(context).push(
      new MaterialPageRoute<void>(
        builder: (BuildContext context) {
          //传递收藏后的单词
          final Iterable tiles = _collected.map((WordPair pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase, //单词
              ),
            );
          },
          );
        },

      ),
    );
  }
复制代码
  1. 创建Scaffold，其中包含标题栏，body由ListView组成，每一个Item项之间有一条分割线，运行发现，新的路由会自动添加返回按钮，这是因为Navigator会在应用栏自动添加一个“返回”按钮，不需要调用Navigator.pop,点击返回按钮会返回到主界面，代码如下：
//跳转新页面开始
  void _collectWordsPage() {
    Navigator.of(context).push(
      new MaterialPageRoute<void>(
        builder: (BuildContext context) {
          //传递收藏后的单词
          final Iterable tiles = _collected.map((WordPair pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase, //单词
              ),
            );
          },
          );
          //添加分割线开始
          final List divided = ListTile.divideTiles(
            tiles: tiles,
            context:context,
          ).toList();
          return new Scaffold(
            appBar: new AppBar(
              title: new Center(child: const Text("Collect Words")),
            ),
            body: new ListView(children: divided),
          );
        },

      ),
    );
  }
复制代码

最终运行效果发现标题并不是居中对齐，因为默认的有边距，这时候需要自定义AppBar就可以，代码如下：

          return new Scaffold(
            appBar: new AppBar(
              titleSpacing: 0.0,
              //MaterialPageRoute这个自带了返回键 下面的属性设置取消返回键
              automaticallyImplyLeading:false,
              title: new Container(decoration: new BoxDecoration(color: new Color(0x00000000),
              ),
              child:new Stack(
                children: [
                  new Container(
                    //左边位置
                    alignment: Alignment.centerLeft,
                    child:new IconButton(
                      //图标样式
                      icon:new Icon(Icons.arrow_back),
                      //点击事件
                      onPressed: (){
                        Navigator.pop(context);
                      }
                    ),
                  ),
                  new Center(child:new Text("Collect Words")),
                ],
              ),)
            ),
            body: new ListView(children: divided),
          );
复制代码

最终运行效果如下，左边是IOS，右边是Android：

六、总结

入门Flutter的第一天，简单知道了一下几点：

  1. Flutter的特性和框架构成，它和大多数构建移动应用的工具不一样，它是用自己的渲染引擎来绘制Widget，它中间层只有C/C++代码，Flutter使用Dart语言实现系统的绝大部分功能(布局，动画，手势)。
  2. 开发环境的搭建。
  3. 体验Flutter添加UI的步骤。
  4. 路由（页面）的跳转。

若有错误，欢迎指正~

转载于:https://juejin.im/post/5c443681f265da613a544bca

你可能感兴趣的:(Flutter学习之入门和体验)

  • Docker 镜像优化：如何避免重复安装软件，加速服务的构建与部署 花千树-010 Dockerdocker容器运维
    在日常开发中，我们经常遇到这样的问题：由于服务需要额外安装大量软件（如JDK、vim、curl、git等），导致Docker镜像构建时间过长，并且每次构建都需要重复安装这些依赖。今天，我们将探讨几种优化方案，通过构建中间层镜像和使用多阶段构建，从而显著提高构建和部署效率。问题分析当你在Dockerfile中直接使用aptinstall安装依赖时，通常会面临以下问题：重复安装导致构建缓慢每次构建镜像
  • nextjs 实现rag知识库检索增强的ai问答app *goliter * web开发学习人工智能
    AI-Chat-一个基于LLM大语言模型的知识库问答系统项目源码：https://github.com/goliter/ai-chat项目简介AI-Chat是一个基于Next.js和React开发的现代化大语言模型的知识库问答系统。该平台提供了简易的对话界面，支持上传文件进行知识库的构建，让用户在与大语言模型进行问答时给与大模型知识库内的相关内容。主要功能上传文件构建属于自己的知识库支持doc,t
  • 360度用户信息赋能老客运营自动化 刘小奇�多 自动化运维sass
    在当今竞争激烈的商业环境中，客户关系管理（CRM）系统已成为企业提升客户满意度和忠诚度的重要工具。通过基于360度用户信息，企业能够深入洞察老客需求，实现自动化的老客运营和维护，从而提升客户体验和企业竞争力。一、360度用户信息整合：洞察老客需求的关键（一）多渠道数据收集企业需要从多个渠道收集客户数据，包括线上线下的交互记录。例如，通过企业微信，销售人员可以实时与客户沟通，了解他们的最新需求和反馈
  • 域名如何绑定服务 我真的不想做程序员 javajava后端开发语言服务器阿里云容器
    目录一、理解域名与Java服务之间的关系二、DNS解析三、配置DNS记录四、Java服务的配置1.部署Java应用2.配置反向代理五、DNS解析六、验证绑定是否成功七、代码示例八、总结在现代网络应用中，域名和Java服务的绑定是实现用户友好访问和后台服务的关键步骤。本文将详细介绍这一过程，包括DNS解析、反向代理以及Java服务的配置，最后会展示代码示例和视觉化流程图。一、理解域名与Java服务之
  • 动态规划算法求解背包问题的全面剖析 15号外媒 算法
    摘要本文深入剖析动态规划算法在求解背包问题中的应用，详细阐述动态规划算法的基本原理、核心要素与解题步骤。通过对0-1背包问题和完全背包问题的具体分析，展示动态规划算法在解决背包问题上的高效性与独特优势。同时，结合实际案例进行算法实现与结果分析，并探讨算法的优化策略与拓展应用，旨在帮助读者全面掌握动态规划算法求解背包问题的方法与技巧。一、引言背包问题作为组合优化领域的经典问题，在资源分配、投资决策、
  • （教程）如何在HTML网页里嵌入PDF文件？ IDRSolutions_CN pdf图像处理htmlhtml5团队开发
    开发者可以使用不同的标签在HTML中嵌入PDF文件，常见的有、和。它们都能在网页应用中显示PDF，但哪种方式更好？有没有比这更好的方式来在浏览器中显示PDF？方法1：使用标签如果不需要回退内容，可以使用标签。缺点：不常用，因为如果浏览器不支持PDF，显示会是一片空白。YourbrowserdoesnotsupportPDFfiles.Downloadthefileinstead方法2：使用标签标签
  • TensorFlow深度学习实战项目：从入门到精通 点我头像干啥 Ai深度学习tensorflow人工智能
    引言深度学习作为人工智能领域的一个重要分支，近年来取得了显著的进展。TensorFlow作为Google开源的深度学习框架，因其强大的功能和灵活的架构，成为了众多开发者和研究者的首选工具。本文将带领大家通过一个实战项目，深入理解TensorFlow的使用方法，并掌握深度学习的基本流程。1.TensorFlow简介1.1TensorFlow是什么？TensorFlow是一个开源的机器学习框架，由Go
  • Dify - 架构、部署、扩展与二次开发指南 花千树-010 AIGC架构AIGCpromptembeddingllamagptagi
    本文详细解析Dify的架构、部署流程、高可用中间件的独立部署方法，以及二次开发流程，帮助开发者更高效地管理和扩展Dify。1.本地DEMO部署安装Docker，执行下面脚本，可能需要配置镜像。gitclonehttps://github.com/langgenius/dify.gitcddifycddockercp.env.example.envdockercomposeup-d1.Dify部署后
  • python中strip的使用 ICER瞌睡虫
    今天聊聊python去除字符串空格的函数：strip（）和replace（）1.strip():函数功能描述：Pythonstrip()方法用于移除字符串头尾指定的字符（默认为空格或换行符）或字符序列。注意：该方法只能删除开头或是结尾的字符，不能删除中间部分的字符。格式：str.strip([char])。其中，str为待处理的字符，char指定去除的源字符串首尾的字符。返回结果：去除空格时候的新
  • 揭秘时空大数据：详细介绍、真实应用场景和数据示例解析 陈书予 GIS开发（时空大数据）前端大数据python时序数据库
    时空大数据(SpatialBigData)是指利用空间环境和时间环境信息，以及数字技术，从多种来源获取的海量、动态的、多维的数据，对空间环境和时间环境进行实时监测，并基于复杂的数据分析和挖掘，获取有价值的信息。时空大数据示例：1）社会网络数据：Twitter、Facebook、Instagram等社交媒体上的海量数据，可以通过时间、空间、主题等来提取有价值的信息。2）遥感图像数据：通过遥感技术从卫
  • PakePlus支持将vue/react等项目打包为跨平台桌面软件了 1024小神 多端开发vue.js前端javascript
    PakePLus介绍Turnanywebpage/Vue/ReactandsoonintoadesktopappandmobileappwithRust.轻松将任意网站/Vue/React等项目构建为轻量级(仅5M)多端桌面应用和多端手机应用。pakeplus开源地址：GitHub-Sjj1024/PakePlus:Turnanywebpage/Vue/Reactandsoonintoadeskt
  • 剑指 Offer II 113. 课程顺序（中等 图 bfs 拓扑排序 数组 哈希表） 风雨中de宁静 图搜索算法
    剑指OfferII113.课程顺序现在总共有numCourses门课需要选，记为0到numCourses-1。给定一个数组prerequisites，它的每一个元素prerequisites[i]表示两门课程之间的先修顺序。例如prerequisites[i]=[ai,bi]表示想要学习课程ai，需要先完成课程bi。请根据给出的总课程数numCourses和表示先修顺序的prerequisites
  • 一个完整的小项目案例，涉及到项目的规划，模块的设计功能的衔接等。 PyAIGCMaster 我的学习笔记学习
    以下是一个基于分层架构和模块化设计的项目规划，使用Tkinter作为GUI框架，Playwright进行浏览器操作，SQLite作为数据库：项目结构```web_checker/├──__main__.py#程序入口├──config.py#配置管理├──gui/#图形界面模块│├──__init__.py│└──main_window.py├──services/#业务逻辑│├──__init_
  • 1252. 奇数值单元格的数目 / 剑指 Offer II 113. 课程顺序 彼淇梁 力扣刷题记录算法leetcodejava刷题记录
    1252.奇数值单元格的数目【简单题】【每日一题】思路：【模拟】定义行数组rows和列数组cols，用来记录当前行的+1次数和当前列的+1次数，遍历indices数组用来给rows和cols赋值。定义奇数值单元格数目为ans，初值为0。那么遍历矩阵每个位置，如果当前行和当前列的+1次数和是奇数，则ans+1代码：classSolution{publicintoddCells(intm,intn,i
  • MySQL 进阶学习文档 你曾经是少年 数据库
    一、存储引擎1.1核心架构四层架构：连接层→服务层→引擎层→存储层插件式存储引擎：不同引擎独立管理数据存储，可动态选择1.2主流引擎对比特性InnoDB（默认）MyISAMMemory事务支持✅支持❌不支持❌不支持锁粒度行锁表锁表锁外键支持✅支持❌不支持❌不支持存储位置磁盘磁盘内存适用场景高并发事务读多写少临时数据缓存选择建议：优先选InnoDB（支持事务和外键）读多写少且无需事务选MyISAM临
  • python中strip_python中的strip是什么意思 weixin_39613744 python中strip
    Python中strip()方法用于移除字符串头尾指定的字符（默认为空格或换行符）或字符序列。注意：该方法只能删除开头或是结尾的字符，不能删除中间部分的字符。它的函数原型：string.strip(s[,chars])，它返回的是字符串的副本，并删除前导和后缀字符。（意思就是你想去掉字符串里面的哪些字符，那么你就把这些字符当参数传入。此函数只会删除头和尾的字符，中间的不会删除。）如果strip()
  • LoadRunner 11 性能测试全面教程 金融先生-Frank
    本文还有配套的精品资源，点击获取简介：LoadRunner11（LR11）是HP开发的一款企业级性能测试工具，支持多应用程序类型的负载测试，用于性能评估、瓶颈识别和系统优化。教程详细介绍LR11的组件功能、脚本开发、场景设置、测试执行、结果分析、性能指标监测、故障诊断以及自动化测试等，提供从初级到高级的完整学习路径。1.LoadRunner11(LR11)功能概述LoadRunner11(LR11
  • mysql数据库应用与开发姜桂洪 课后答案_清华大学出版社-图书详情-《MySQL数据库应用与开发》... 韦盛江 课后答案
    前言Oracle公司的MySQL是目前最流行的关系数据库管理系统之一。MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。MySQL数据库以其精巧灵活、运行速度快、经济适用性强、开放源码等优势，作为网站数据库获得许多中小型网站的开发公司的青睐。MySQL性能卓越，搭配PHP和Apache可组成良好的软件开发环境，并且已经大量部署到中小型企业和高校的教学平台。本书从教学实际需求出发，结合
  • Vue.js 中的 Memoization：提升性能的缓存技术 vvilkim vuevue.js前端javascript
    在现代前端开发中，性能优化是一个永恒的话题。随着应用规模的增大，复杂的计算和频繁的函数调用可能会导致性能瓶颈。Vue.js作为一个流行的前端框架，提供了多种优化手段，其中memoization（记忆化）就是一种非常有效的技术。本文将详细介绍Vue.js中的memoization，以及如何利用它来提升应用性能。什么是Memoization？Memoization是一种优化技术，通过缓存函数的结果来避
  • Vue.js 性能优化：虚拟 DOM 与虚拟滚动 vvilkim vuevue.js前端javascript
    在现代前端开发中，性能优化是一个永恒的话题。Vue.js作为一款流行的前端框架，提供了许多强大的工具和技术来提升应用的性能。其中，虚拟DOM和虚拟滚动是两个非常重要的概念。本文将深入探讨它们的原理、优势以及如何在Vue.js中使用它们来优化性能。什么是虚拟DOM？虚拟DOM（VirtualDOM）是Vue.js用于提升性能的核心技术之一。它是一个轻量级的JavaScript对象树，用于表示真实DO
  • Android studio之编译提示Could not find :umeng-asms-v1.2.1:. 码莎拉蒂 . AndriodstudioAndroidCouldnotfind导入正确的aar文件umeng-asms-v1flatDir
    1、问题Couldnotdeterminethedependenciesoftask':app:compileDebugJavaWithJavac'.>Couldnotresolvealltaskdependenciesforconfiguration':app:debugCompileClasspath'.>Couldnotfind:umeng-asms-v1.2.1:.Requiredby:p
  • CVPR2025 | 对抗样本&智能安全方向论文汇总 | 持续更新中~ 四口鲸鱼爱吃盐 文献阅读安全transformer深度学习对抗样本神经网络视觉语言模型后门攻击
    汇总结果来源：CVPR2025AcceptedPapers若文中出现的论文链接和GitHub链接点不开，则说明还未公布，在公布后笔者会及时添加.若笔者未及时添加，欢迎读者告知.文章根据题目关键词搜索，可能会有遗漏.若笔者出现遗漏，欢迎告知.部分文章还未公布正文，只有名称.MindtheGap：通过查询更新分析检测正在进行中的黑盒对抗攻击MindtheGap:DetectingBlack-boxAd
  • Leetcode 剑指 Offer II 032. 有效的变位词 我不是程序员~~~~ C&C++leetcode算法职场和发展
    给定两个字符串s和t，编写一个函数来判断它们是不是一组变位词（字母异位词）。注意：若s和t中每个字符出现的次数都相同且字符顺序不完全相同，则称s和t互为变位词（字母异位词）。示例1:输入:s="anagram",t="nagaram"输出:true示例2:输入:
  • 剑指 Offer II 061. 和最小的 k 个数对 炫云云 大数据算法和数据结构leetcode算法python
    剑指OfferII061.和最小的k个数对给定两个以升序排列的整数数组nums1和nums2,以及一个整数k。定义一对值(u,v)，其中第一个元素来自nums1，第二个元素来自nums2。请找到和最小的k个数对(u1,v1),(u2,v2)…(uk,vk)。示例1:输入:nums1=[1,7,11],nums2=[2,4,6],k=3输出:[1,2],[1,4],[1,6]解释:返回序列中的前3对
  • Java多线程与高并发专题——Callable 和 Runnable 的不同？ 黄雪超 技术基础java开发语言并发编程
    为什么需要Callable？Runnable的缺陷Runnable是JDK1.0就有的，而Callable是JDK1.5新增的，那我们为什么需要Callable？要想回答这个问题，我们先来看看先有的Runnable有哪些缺陷？不能返回一个返回值第一个缺陷，对于Runnable而言，它不能返回一个返回值，虽然可以利用其他的一些办法，比如在Runnable方法中写入日志文件或者修改某个共享的对象的办法
  • 使用大语言模型API在AI应用中的实现 qq_37836323 人工智能语言模型自然语言处理python
    随着人工智能技术的迅速发展，大语言模型（LLM）在自然语言处理（NLP）领域的应用越来越广泛。本文将介绍如何使用大语言模型API来实现一些基础的AI应用，并提供一个简单的demo代码，帮助大家更好地理解和使用这些技术。大语言模型API简介大语言模型（如GPT-4）能够理解和生成类似人类的文本。这些模型可以应用于各种任务，包括文本生成、语言翻译、情感分析、对话系统等。为了方便国内用户访问这些强大的模
  • python基于Django的旅游景点数据分析及可视化的设计与实现 7blk7 qq2295116502 pythondjango数据分析
    目录项目介绍技术栈具体实现截图Scrapy爬虫框架关键技术和使用的工具环境等的说明解决的思路开发流程爬虫核心代码展示系统设计论文书写大纲详细视频演示源码获取项目介绍大数据分析是现下比较热门的词汇，通过分析之后可以得到更多深入且有价值的信息。现实的科技手段中，越来越多的应用都会涉及到大数据随着大数据时代的到来，数据挖掘、分析与应用成为多个行业的关键,本课题首先介绍了网络爬虫的基本概念以及技术实现方法
  • MySQL学习路线 蜡笔小新星 MySQL数据库mysql学习经验分享
    本专栏纯干货订阅专栏不迷路以下是一个详细的MySQL学习路线，适合从初学者到中高级用户的逐步学习。整个路线分为几个阶段，每个阶段包含了必要的知识点和学习材料。第一阶段：基础知识（1-2周）目标：了解数据库的基本概念，熟悉MySQL的基本用法。学习内容：数据库基础什么是数据库、数据库管理系统（DBMS）数据库的类型（关系型数据库与非关系型数据库）SQL（结构化查询语言）概述MySQL入门MySQL的
  • 用python执行js代码：PyExecJS库详解 数据知道 2025年爬虫和逆向教程pythonjavascript爬虫数据采集nodejs
    更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录1.介绍和安装1.1PyExecJS介绍1.2安装JavaScript运行时1.3安装PyExecJS2.PyExecJS的基本使用2.1执行简单的JavaScript代码2.2使用外部JavaScript文件2.3先编译、后调用2.4传递参数和获取返回值3.PyExecJS的高级功能3.1指定JavaScript运行时3.2处理异步JavaSc
  • 响应式数据 和 Pinia 状态 肉肉不吃 肉 前端vue.jspinia
    响应式数据和Pinia状态是Vue.js应用中用于管理数据的两种重要机制，它们之间有密切的关系。以下是它们的定义、特点以及关系：1.响应式数据定义响应式数据是Vue.js的核心特性之一，指的是当数据发生变化时，视图会自动更新。Vue.js通过Proxy或Object.defineProperty实现数据的响应式。特点自动更新：当数据变化时，依赖该数据的视图会自动更新。声明式：开发者只需关注数据本身
  • 辗转相处求最大公约数 沐刃青蛟 C++漏洞
    无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &
  • F5负载均衡会话保持技术及原理技术白皮书 bijian1013 F5负载均衡
    一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下
  • Object.equals方法：重载还是覆盖 Cwind javagenericsoverrideoverload
    本文译自StackOverflow上对此问题的讨论。 原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu
  • 初始线程 15700786134
          暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr
  • Linux的tcpdump 被触发 tcpdump
    用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 实用命令实例 默认启动 tcpdump 普通情况下，直
  • 安卓程序listview优化后还是卡顿 肆无忌惮_ ListView
    最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb
  • 扩展easyUI tab控件，添加加载遮罩效果 知了ing jquery
    (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&
  • gradle上传jar到nexus 矮蛋蛋 gradle
    原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon
  • 千万条数据外网导入数据库的解决方案。 alleni123 sqlmysql
    从某网上爬了数千万的数据，存在文本中。 然后要导入mysql数据库。 悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。 于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec
  • JAVA IO InputStreamReader和OutputStreamReader 百合不是茶 JAVA.io操作 字符流
    这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据
  • MO、MT解读 bijian1013 GSM
    MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP
  • 五个JavaScript基础问题 bijian1013 JavaScriptcallapplythisHoisting
    下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs
  • 【Thrift二】Thrift Hello World bit1129 Hello world
    本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency>
  • 【Avro一】Avro入门 bit1129 入门
    本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj
  • 安装nginx+ngx_lua支持WAF防护功能 ronin47
    需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb
  • java-5.查找最小的K个元素-使用最大堆 bylijinnan java
    import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void
  • TCP的TIME-WAIT bylijinnan socket
    原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记 说明： 主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA
  • jquery ajax 序列化表单 coder_xpf Jquery ajax 序列化
       checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo
  • Apache集群乱码和最高并发控制 cuisuqiang apachetomcat并发集群乱码
    都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot
  • websocket dalan_123 websocket
    一、低延迟的客户端-服务器 和 服务器-客户端的连接 很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长
  • 菜鸟分析网络执法官 dcj3sjt126com 网络
      最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. 
  • Android相对布局属性全集 dcj3sjt126com android
    RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的
  • Tomcat内存设置详解 eksliang jvmtomcattomcat内存设置
    Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 可以利用JVM提
  • Java6 JVM参数选项 greatwqs javaHotSpotjvmjvm参数JVM Options
    Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: [email protected] 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt
  • weblogic创建JMC i5land weblogicjms
    进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers
  • 基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 justjavac DHT
    上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 系统包括几个独立的部分： 使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子； 使用 PHP CI 框架开发的简易网站； 搜索引擎目前直接使用的 MySQL，将来可以考虑使
  • sql添加、删除表中的列 macroli sql
    添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO
  • PHP中二维数组的排序方法 abc123456789cba 排序二维数组PHP
    <?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level
  • hive优化之------控制hive任务中的map数和reduce数 superlxw1234 hivehive优化
    一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。 主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. 
  • Spring Boot 1.2.4 发布 wiselyman spring boot
    Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他