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学习之入门和体验)

  • 全国产飞腾+FPGA架构，支持B码+12网口+多串电力通讯管理机解决方案 深圳信迈科技DSP+ARM+FPGA 飞腾+FPGA电力新能源fpga开发架构电力通讯管理机全国产
    行业痛点:中国的电力网络已经成为当今世界覆盖范围最广、结构最为复杂的人造科技系统。随着国家和各部委颁布了一系列法律法规，如国家颁布的《中华人民共和国网络安全法》、工信部颁布的《工业控制系统信息安全防护指南》、发改委颁布的14号令《电力监控系统安全防护规定》、国家能源局颁布的《关于印发电力监控系统安全防护总体方案等安全防护方案和评估规范的通知》，凸显了电力行业的网络安全防护工作的重要性。基于电力行业
  • flask--基础知识点--6--flask高并发处理 Raging__Fire #flaskpythonflask
    Flask是一个轻量级的PythonWeb框架，适合构建中小型应用。但是，对于高并发场景，Flask本身可能需要一些辅助工具和配置来提升性能。以下是一些优化Flask应用以处理高并发的方法：1.使用WSGI服务器Flask自带的开发服务器性能和稳定性不足以应对生产环境中的高并发请求，可以考虑使用更强大的WSGI服务器，如：Gunicorn:一个基于Python的WSGIHTTP服务器。uWSGI:
  • webgl threejs 云渲染(服务器渲染、后端渲染)解决方案 allenjiao Threejswebglthreejs云渲染后端渲染服务器渲染云流化三维云渲染
    云渲染和流式传输共享三维模型场景1、本地无需高端GPU设备即可提供三维项目渲染云渲染和云流化媒体都可以让3D模型共享变得简单便捷。配备强大GPU的远程服务器早就可以处理密集的处理工作，而专有应用程序，用户也可以从任何个人设备查看全保真模型并与之交互。2、云流媒体实现多终端联动共享价值更高在项目应用场景中，在大屏、电脑、平板、手机和其它移动终端，可以实现多屏联动、远程协助，三维云流化让客户访问时可以
  • 2025-03-14 学习记录--C/C++-PTA 习题2-1 求整数均值 小呀小萝卜儿 学习-C/C++学习c语言
    合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。一、题目描述⭐️习题2-1求整数均值本题要求编写程序，计算4个整数的和与平均值。题目保证输入与输出均在整型范围内。输入格式:输入在一行中给出4个整数，其间以空格分隔。输出格式:在一行中按照格式“Sum=和;Average=平均值”顺序输出和与平均值，其中平均值精确到小数点后一位。输入样例:1234输出样例:Sum=10;Average=2
  • 基于NXP+FPGA轨道交通3U机箱结构牵引控制单元 深圳信迈主板定制专家 轨道交通NXP+FPGAX86+FPGAfpga开发边缘计算人工智能大数据嵌入式硬件
    基于NXP+FPGA轨道交通异步电机牵引控制单元(TCU-IM)异步电机牵引控制单元（TCU-IM）用于牵引逆变器-异步电机构成的牵引电传动系统，可采用车控或架控方式。执行高性能异步电机复矢量控制策略，具有响应迅速、有效可靠的防空转·滑行控制功能以及平稳、无冲击的带速重投技术。无速度传感器控制通过转速观察算法，推算出准确的转速和转子位置，在实际应用中，达到省去速度传感器的目的，降低成本并减少故障点
  • 如何提高Flask的高并发性能 BirdMan98 FlaskPythonflaskpython后端
    提高Flask的并发性能可以从多个方面入手，主要包括服务器优化、数据库优化、代码优化和使用异步技术。下面详细介绍几种方法：1.使用高性能WSGI服务器Flask自带的开发服务器（flaskrun）不适用于生产环境。建议使用高性能WSGI服务器来运行Flask：推荐的WSGI服务器Gunicorn（推荐）：适用于LinuxWaitress：适用于WindowsuWSGI：适用于Linux，性能更强，
  • STL中list的使用 海马HiMark C++STLlist
    list的底层结构list底层是一个带头节点的双向循环链表，任意位置插入和删除时间复杂度0(1)list迭代器由于list底层是带头节点的双向循环链表，因此list的迭代器需要list的实现者自己提供迭代器怎么实现呢？迭代器的本质是指针，将指针封装出新的类型，指针有的操作，迭代器也视情况支持这些操作，比如：指针++，–，*，->等操作。迭代器在类中将这些操作重载出来即可，然后将list迭代器看作l
  • 1.两数之和 吃小狼的兔 LeetCode-热题100LeetCode-数组算法leetcode数据结构
    题目：给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。示例1：输入：nums=[2,7,11,15],target=9输出：[0,1]解释：因为nums[0]+nums[1]==9，返回[0,1]。示例2：输入：nums=[3
  • 为什么要进行数据仓库分层？ BenBen尔 #建模方法spark大数据分布式
    对数据仓库进行分层（如常见的ODS、DWD、DWS、ADS等层次）是为了解决复杂数据处理场景中的效率、可维护性、易用性问题。以下是分层的主要目的和优势：1、职责分离，逻辑解耦分层能够沉淀公共的数据模型，实现了逻辑解耦。有以下好处：减少重复开发，提升研发效率从数仓模型角度能够提升数据一致性。减少了冗余计算，高频查询或者高频开发无需使用原始数据，直接使用公共的数据模型查询或者开发即可，减少了对计算资源
  • 全自动量化交易软件是否真的可靠？使用过程中有哪些潜在风险需要注意 财云量化 python炒股自动化量化交易程序化交易全自动量化交易软件可靠性潜在风险数据准确性股票量化接口股票API接口
    炒股自动化：申请官方API接口，散户也可以python炒股自动化（0），申请券商API接口python炒股自动化（1），量化交易接口区别Python炒股自动化（2）：获取股票实时数据和历史数据Python炒股自动化（3）：分析取回的实时数据和历史数据Python炒股自动化（4）：通过接口向交易所发送订单Python炒股自动化（5）：通过接口查询订单，查询账户资产股票量化，Python炒股，CSDN
  • CAPL的程序结构 正当少年 CAPL开发语言
    CAPL（CommunicationAccessProgrammingLanguage）是Vector公司开发的一种用于汽车网络仿真、测试和开发的脚本语言，主要用于CANoe、CANalyzer等工具中。CAPL程序的结构相对简单，通常由事件驱动的方式组织。以下是CAPL程序的基本结构：1.变量声明CAPL程序通常以变量声明开始。变量可以是全局变量或局部变量。全局变量在整个程序中可见，局部变量只在
  • JVM内存监控及调优分析 闲着无聊整些资料 JVMjvmjavalinux
    一、内存监控背景在做JVM内存分析前，需要堆JVM内存及垃圾回收算法和垃圾回收器有一定了解，具体可以参考我之前的一篇文章：常见的垃圾回收器及垃圾回收算法1.1、为什么要做内存监控我们在做开发的时候不可避免的会遇到一些问题，诸如下面这些问题：生产环境发生了内存溢出该如何处理？生产环境应该给服务器分配多少内存合适？如何对垃圾回收器的性能进行调优？生产环境CPU负载飙高该如何处理？生产环境出现死锁该如何
  • SQLite学习（十一）使用JDBC读写SQLite数据，基于Java实现 Designer 小郑 SQLite从入门到实战sqlite数据库sqljavajdbc
    1.前言2.基础工作2.1创建Java项目2.2依赖Jar包3.连接SQLite4.查询SQLite数据5.新增SQLite数据6.总结1.前言在上一篇《SQLite学习（十）SQLite的注入问题的防范、数据库文件导入和导出》中，讲解了SQLite的SQL注入问题和应对措施，在本篇博客中，将继续讲解如何使用JDBC读写SQLite数据。同学们将学习到：JDBC是什么使用JDBC读写SQLite请
  • JVM 调优 百里自来卷 jvm
    在生产环境中，JVM调优是确保Java应用程序性能和稳定性的重要步骤。调优的目标通常是减少垃圾回收的时间、降低内存使用和提高应用程序的吞吐量。以下是一些常见的JVM调优策略和方法。选择合适的垃圾收集器-XX:+UseG1GC调整堆内存大小，通过调整堆内存的大小，可以控制应用程序的性能设置初始堆大小：-Xms512m设置最大堆大小：-Xmx2048m设置年轻代大小：-Xmn256m一般推荐将初始堆和
  • GC 频率和触发条件 百里自来卷 jvm
    在Java中，垃圾回收（GC）的频率和触发条件取决于GC算法、堆内存分配、对象生命周期以及JVM参数的配置。下面详细介绍这些影响因素：1.GC触发条件GC主要触发的情况如下：(1)年轻代GC（MinorGC/YoungGC）触发条件：Eden区满了：当新对象分配到Eden区，如果Eden区没有足够的空间分配新对象，就会触发MinorGC。Survivor空间不足：当存活对象从Eden复制到Surv
  • uniapp vue3项目用原生h5 audioContext实现语音文件倍速播放，可适应h5和安卓app 努力做大神 uni-appandroid音频倍速播放
    前言uniapp项目要做类似微信的聊天语音播放功能，可以切换语音，可以点击切换播放/停止播放状态，还可以倍速播放。开始用了uniapp的音频组件uni.createInnerAudioContext()，很好用但就是倍速播放playbackRate属性不起作用，经过研究，决定用原生h5的audioContext。AudioContext是WebAudioAPI的一部分，它代表了一个音频处理图，允许
  • springboot新手入门搭建项目 stayhungerstayflush springboot后端java
    SpringBoot新手入门指南：从原理到实践一、SpringBoot简介SpringBoot是基于Spring框架的快速开发脚手架，通过约定优于配置的设计理念，简化了Spring应用的初始化搭建和开发过程。主要优势包括：内嵌Web服务器（Tomcat/Jetty）自动配置Spring和第三方库提供生产级监控端点无需XML配置二、核心概念解析1.自动配置（Auto-Configuration）@S
  • 【测试语言篇四】Python进阶篇之json模块 m0_37135615 编程语言pythonphp开发语言
    一、json模块介绍JSON（JavaScript对象表示法）是一种轻量级数据格式，用于数据交换。在Python中具有用于编码和解码JSON数据的内置json模块。只需导入它，就可以使用JSON数据了：importjsonJSON的一些优点：JSON作为“字节序列”存在，在我们需要通过网络传输（流）数据的情况下非常有用。与XML相比，JSON小得多，可转化为更快的数据传输和更好的体验。JSON非常
  • 垃圾回收机制是什么 ？JVM 核心结构? 胡图蛋. jvm
    垃圾回收机制是什么jvm的垃圾回收机制是GC（GarbageCollection），也叫垃圾收集器。GC基本原理：将内存中不再被使用的对象进行回收；GC中用于回收的方法称为收集器，由于GC需要消耗一些资源和时间，Java在对对象的生命周期特征进行分析后，按照新生代、老年代的方式来对对象进行收集，以尽可能的缩短GC对应用造成的暂停。不同的对象引用类型，GC会采用不同的方法进行回收，JVM对象的引用分
  • 论文写作篇#6：在C会里，YOLO文章的摘要怎么写？Conclusion怎么写？摘要和Conclusion有哪些区别？ hjs_deeplearning YOLO人工智能深度学习计算机视觉
    前两次学习中，我们学习了C会YOLO论文的结构和消融实验的写法论文写作篇#5：想发C会，YOLO的消融实验AblationExperiment/Study怎么写？-CSDN博客https://blog.csdn.net/hjs314159/article/details/146261468?spm=1001.2014.3001.5502论文写作篇#4：YOLO还能发C会论文吗？C会论文的YOLO文
  • 开源应用驱动企业新质生产力：Websoft9以EPP+AI+知识库助您领跑未来 开源
    开源应用驱动企业新质生产力：Websoft9以EPP+AI+知识库助您领跑未来在数字化转型加速的今天，企业新质生产力的核心已从传统资源投入转向技术驱动的效率革命。开源应用凭借其灵活性、成本优势和技术创新力，成为企业实现这一目标的关键引擎。作为开源技术与行业场景化落地的领航者，Websoft9通过企业应用平台（EPP）、AI智能引擎与知识库系统三位一体的解决方案，助力企业快速构建新一代生产力工具，实
  • HarmonyOS NEXT 使用AppStorageV2实现全屏展示 架构教育
    在鸿蒙原生开发中，为了实现沉浸式效果，通常在页面中通过设置expandSafeArea属性向顶部和底部扩展安全区实现沉浸式效果，.expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])；设置完成后，发现没有实现想要的效果，就需要点击ArkUIInspector查看当前展示试图层级中，哪些试图没有实现沉
  • STL--list基本使用 csdnjiajiac C++学习语言学习笔记c++开发语言
    目录一.基本概念二.基本使用1.list构造2.list赋值与交换3.list的大小操作4.list插入和删除5.list数据存取6.list反转和排序一.基本概念**功能：**将数据进行链式存储**链表**（list）是一种物理存储单元上非连续的存储结构，数据元素的逻辑顺序是通过链表中的指针链接实现的由于链表的存储方式并不是连续的内存空间，因此链表list中的迭代器只支持前移和后移，属于**双向
  • Web三要素：HTML之ARIA可访问性(3) 双囍菜菜 前端随记前端html服务器ARIA
    ARIA：为Web构建数字盲道的技术革命文章目录ARIA：为Web构建数字盲道的技术革命一、屏幕背后的黑暗世界：一个被忽视的用户群体1.1触目惊心的现实案例1.2法律合规的达摩克利斯之剑二、ARIA技术体系的三重维度2.1角色（Roles）：定义元素身份常用角色分类2.2属性（Properties）：描述元素特征关键属性矩阵2.3状态（States）：反映动态变化状态同步机制三、ARIA实战：构建
  • Django REST Framework中的序列化器类和视图类 八九燕来 djangorestfulsqlite
    序列化器类一、Serializer序列化类Serializer是DRF的序列化器基类，提供基本功能，使用Serializer类需要自己定义字段名称和类型。BookSerializer(Serializer):name=serializers.CharField()price=serlializers.IntegerField()date=serlializers.DateField()Serial
  • 69.Harmonyos NEXT图片预览组件应用实践（二）：电商、内容与办公场景 harmonyos-next
    温馨提示：本篇博客的详细代码已发布到git:https://gitcode.com/nutpi/HarmonyosNext可以下载运行哦！HarmonyosNEXT图片预览组件应用实践（二）：电商、内容与办公场景效果预览一、电商应用最佳实践1.功能需求电商应用中的商品图片预览需求包括：支持商品多角度图片查看高清缩放查看商品细节商品参数标注和热点标记与商品信息面板的联动支持视频和图片混合展示2.实现
  • HarmonyOS NEXT 权限申请系统授权和用户授权权限 架构教育
    在鸿蒙原生开发中，我们normal级别的证书能够使用的权限分为系统授权权限和用户授权权限其中系统授权权限只需要在模块的module.json5中requestPermissions中添加name就可以了，不需要reason等信息描述，但用户授权就需要reason和使用方式，同时在使用时还需要向用户弹框申请；下面时定位权限和网络权限的申请"requestPermissions":[{"name":"
  • 非对称加密：SSL/TLS握手的数学基石 安全
    1.密钥交换的密码学困局在未加密的HTTP通信中，攻击者可通过中间人攻击（MITM）窃听或篡改数据。SSL/TLS协议的核心挑战在于：如何在不安全的信道上建立安全通信？这本质上是一个“密钥分发问题”——若使用对称加密（如AES），双方需要共享同一密钥，但密钥本身如何安全传递？非对称加密的突破性在于公钥与私钥的分离。以RSA算法为例，其数学基础是大质数分解难题：选择两个大质数p和q（通常≥2048位
  • 《无声代码里的银杏时钟》 程序员
    陆昭的耳机永远比别人多一副。2023年入职那天，他把降噪耳机和助听设备叠在一起塞进耳朵，工位隔板上贴着便签："请打字沟通，谢谢"。"新来的聋子也配做核心组？"茶水间的议论像针一样扎进助听器。他攥紧咖啡杯，屏幕上是祖传的银行核心系统——用了二十年的COBOL代码，每个字符都像生锈的齿轮，稍碰就会崩出火星。第一个月，他在代码注释里画银杏叶。总行老楼前的银杏树是地标，入职培训时HR说："这棵树比系统年龄
  • 高并发系统的艺术：如何在流量洪峰中游刃有余 架构
    作者：京东物流赵勇萍前言我们常说的三高，高并发、高可用、高性能，这些技术是构建现代互联网应用程序所必需的。对于京东618备战来说，所有的中台系统服务，无疑都是围绕着三高来展开的。而对于京东庞大的客户群体，高并发的要求尤为重要。用户对在线服务的需求和期望不断提高，系统的并发处理能力成为衡量其性能和用户体验的关键指标之一。高并发系统不仅仅是大型互联网企业的专利，对于任何希望在市场中占据一席之地的公司来
  • 辗转相处求最大公约数 沐刃青蛟 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其他