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

  • OSPF与RIP的路由引入 Ramphastos1101 数通基础网络
    #交换设备路由引入不同的网络会根据自身的实际情况来选用路由协议。比如有些网络规模很小，为了管理简单，部署了RIP;而有些网络很复杂，可以部署OSPF。不同路由协议之间不能直接共享各自的路由信息，需要依靠配置路由的引入来实现。获得路由信息一般有3种途径:直连网段、静态配置和路由协议。可以将通过这3种途径获得的路由信息引入到路由协议中,例如,把直连网段引入到OSPF中,叫做“引入直连”;把静态路由引入
  • 卷积这个词在卷积神经网络中应该怎么理解 abments 人工智能cnn深度学习计算机视觉
    卷积的定义数学概念：在数学上，卷积是一种操作，通常用于两个函数之间的运算。对于图像处理而言，这些函数通常是输入图像和一个称为“卷积核”或“滤波器”的小矩阵。在CNN中的应用：卷积操作是通过滑动窗口（卷积核）与输入数据进行点乘并求和来提取特征的。具体步骤定义卷积核：一个卷积核是一个小矩阵，通常为3x3、5x5等尺寸。卷积核中的每个值称为权重（weights），这些权重是通过训练过程优化得到的。滑动窗
  • 解析Linux中的系统安全及应用（二） 石头城云计算笔记 Linuxsu命令切换用户sudo机制提升权限PAM安全认证网络端口扫描弱口令检测
    各位小伙伴大家好，本次和大家分享的是Linux系统中的系统安全及应用的相关理论知识及操作。我将通过以下几点和相关的实验进行分析说明：（接上篇）五.使用su命令切换用户：1、用途及方法用途：SubstituteUser，切换用户格式：su-目标用户（bash环境）2、密码验证root→任意用户，不验证密码普通用户→其他用户，验证目标用户的密码[jerry@localhost~]$su-root（带-
  • Node.js 内置模块简介（带示例） 浪九天 node.jsnode.js开发语言前端
    目录1.fs（文件系统）模块2.http模块3.path模块4.os模块5.events模块6.crypto模块1.fs（文件系统）模块fs模块提供了与文件系统进行交互的功能，包括文件的读写、删除、重命名等操作。它有同步和异步两种操作方式，异步操作能避免阻塞事件循环，在处理大量文件或高并发场景中更常用。示例：异步读取文件内容constfs=require('fs');//异步读取文件fs.read
  • Node.js学习01-初识Node.js与内置模块 Meowmow nodejsnode.js学习javascript
    目录初识Node.js在Node.js环境执行js代码内置模块fs文件系统模块路径动态拼接问题path路径模块http模块request请求对象初识Node.jsNode.js是基于ChromeV8引擎的JavaScript运行环境，无法调用DOM和BOM等浏览器内置API。使用Node.js可以：基于Express框架快速搭建web应用基于Electron框架构建跨平台的桌面应用基于restif
  • Python vLLM 实战应用指南 ghostwritten pythonpython开发语言
    文章目录1.vLLM简介2.安装vLLM3.快速开始3.1加载模型并生成文本3.2参数说明4.实战应用场景4.1构建聊天机器人示例对话：4.2文本补全输出示例：4.3自定义模型服务启动服务调用服务5.性能优化5.1GPU加速5.2动态批处理6.总结vLLM是一种高性能的开源深度学习推理引擎，专注于高效的生成式模型推理任务。它通过动态批处理和内存优化技术大幅提高了大模型（如GPT系列）的推理性能，非
  • 量子计算在材料科学中的应用：开辟新技术前沿 Echo_Wish 人工智能前沿技术量子计算
    量子计算在材料科学中的应用：开辟新技术前沿近年来，量子计算作为一项革命性的技术，逐渐在多个领域展现出巨大的潜力，尤其是在材料科学中的应用，展现了超越经典计算机的能力。量子计算能够通过量子比特（qubit）同时处理多个状态，在处理复杂计算任务时，速度和效率远超传统计算机。对于材料科学来说，量子计算提供了一种全新的视角，能够在分子和原子层面进行更为精确的模拟，从而加速新材料的发现和优化。作为一名自媒体
  • PHP For 循环 web13688565871 面试学习路线阿里巴巴phpandroidjava
    基本概念For循环的结构在PHP编程中，for循环是一种强大的控制结构，用于重复执行特定代码块。其语法结构由三个关键部分组成：初始化表达式、条件表达式和更新表达式。这种结构设计使得for循环特别适合处理已知迭代次数的任务。for循环的基本语法如下：for(初始化表达式;条件表达式;更新表达式){//循环体}初始化表达式初始化表达式在循环开始前执行一次，通常用于设置循环计数器或其他必要的变量。例如：
  • 从零到一：利用DeepSeek构建高精度图像分类模型实战解析 一碗黄焖鸡三碗米饭 人工智能前沿与实践分类数据挖掘人工智能
    引言：为什么选择DeepSeek进行图像分类？在计算机视觉领域，图像分类作为基础任务，其技术演进经历了从传统特征工程到深度学习的革命性转变。DeepSeek作为国产自研的深度学习框架，凭借其高效计算优化和灵活架构设计，在ImageNet等基准测试中展现出与PyTorch、TensorFlow等主流框架相媲美的性能。本文将手把手带您实现从零搭建工业级图像分类模型的全过程。一、DeepSeek技术架构
  • python中httpx库的详细使用及案例 数据知道 2025年爬虫和逆向教程pythonhttpx开发语言爬虫
    文章目录1.安装httpx2.同步请求3.异步请求4.高级功能5.错误处理6.配置客户端7.结合BeautifulSoup使用8.示例：抓取并解析网页9.注意事项httpx是一个现代化的PythonHTTP客户端库，支持同步和异步请求，功能强大且易于使用。它比requests更高效，支持HTTP/2和异步操作。以下是httpx的详细使用方法：1.安装httpx首先，确保已经安装了httpx。可以通
  • 部署 Node.js 应用之 PM2 7 号 Node.jsnode.js
    什么是pm2PM2是一个非常流行的Node.js应用进程管理工具，它帮助你管理和保持Node.js应用的高可用性。PM2提供了进程守护、日志管理、负载均衡等功能，非常适合生产环境使用。安装pm2npminstallpm2-g验证是否安装成功pm2--versionPM2常用命令启动Node.js应用（启动打包后的）pm2startapp.js停止Node.js应用（启动打包后的）pm2stopap
  • 第九课：浅拷贝与深拷贝 MgVccl python
    一、可变参数和不可变参数Python中string、tuple和number是不可变对象，而dict、list等是可变对象。不可变对象在进行重新赋值的时候，实际上是将原始值丢弃，将变量指向一个新的值；可变对象的可变性实质上是指更改可变对象中的子对象，比如ist中的item元素的更改。直接赋值：其实就是对象的引用（别名），只是形成2个变量，实际上还是指向同一个对象。eg：#直接赋值a=[1,2,3]
  • Python学习(八):返回值&变量的作用域&参数的传递&浅拷贝和深拷贝&类对象和方法 追梦梓辰 Pythonpython开发语言
    Python学习分享:今日学习:返回值&变量的作用域&参数的传递&浅拷贝和深拷贝&类对象和方法返回值return返回值要点:1.如果函数体中包含return语句，则结束函数执行并返回值2.如果函数体中不包含return语句，则返回none值3.要返回多个返回值，使用列表，元组，字典，集合将多个值“存起来”即可。#定义一个返回两个数平均值的函数:defmy_avg(a,b):return(a+b)/
  • 灵犀互娱游戏测试开发一面面经 wezzzzzz 游戏
    阿里的子公司,做的是游戏业务,所以投递的时候把简历上加上了自己的游戏经历.面试官大哥也围绕着游戏问了一些问题,面试体验很好~~1.介绍一下自己(巴拉巴拉一顿说)2.看你的简历上有写关于用友的实习,可以介绍一下那边的业务吗?还有为什么那边用的c#来写自动化脚本,很好奇.大概说了一下之前实习的组,业务是做什么的,以及c#来做为测试开发语言是因为那边的产品就是c#来写的,猜测是因为方便开发帮忙写自动化~
  • 深度学习模型可视化：通俗易懂的全面解读 Crazy learner 模型部署深度学习人工智能
    目录1.什么是深度学习模型可视化？2.张量（Tensors）：深度学习中的核心数据结构3.常见的节点操作**Gather**操作**Transpose**操作**Pow**操作**Add**操作**Mix**操作4.查看模型详情5.可视化工具总结在深度学习领域，理解模型内部的工作原理对于优化、调试和改进模型至关重要。随着神经网络的复杂性日益增加，开发者和研究人员逐渐意识到，可视化不仅是理解模型的一
  • Kubernetes集群V1.26二进制部署 L-0715H Kuberneteskubernetes容器云原生
    Kubernetes集群V1.26二进制部署1：环境介绍本环境是基于内网环境无互联网情况下的Kubernetes集群的部署，Runtime使用containerd。亲测有效，有基础可以修改我的配置文件，不懂请不要更改，无脑负责粘贴。容器编排：Kubernetes允许您在一个集群中运行和管理容器化的应用程序。它可以自动化容器的部署、扩展和运维。自动化部署：Kubernetes提供了强大的自动化部署功
  • 查看Python库依赖关系的解决方案 爱编程的喵喵 Python基础课程python依赖关系
      大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理解，而且能够帮助新手快速入门。  本文主要介绍了查看Python库依赖关系的解决方案
  • 焦点小组方法在软件工程中的应用与挑战 薄辉 焦点小组方法软件工程研究工具优缺点比较用户参与
    焦点小组方法在软件工程中的应用与挑战背景简介在软件工程领域，焦点小组方法作为一种研究工具，能够帮助研究者从用户和从业者那里获取宝贵的信息和见解。本文基于J.Kontio等人的研究，探讨了焦点小组方法在不同研究阶段的应用，以及它在传统、计算机辅助和在线环境中的优势与挑战。不同研究阶段焦点小组方法的研究问题示例焦点小组方法可以应用于新产品开发的多个阶段，包括信息阶段、提议阶段、分析阶段和评估阶段。每个
  • html data-src和src的区别,img 的data-src 属性实现懒加载 薄辉 htmldata-src和src的区别
    一、什么是图片懒加载？当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次)，当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。通俗一点：1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1*1px的图片路径。2、当页面滚动直至此图片出现在可
  • python 必备模块和包_Python_异常和模块 weixin_39616216 python必备模块和包
    异常处理单个异常处理：try:print(num)exceptNameError:print('没有定义变量')exceptFileNotFoundError:print('找不到文件路径')print(1)多个异常处理：try:print(num)#11/0#open('xxx.txt')except(NameError,FileNotFoundError,ZeroDivisionError):
  • 0. Kaggle实战：Kaggle竞赛实战记录列表（持续更新） AI量金术师 Kaggle竞赛人工智能python开发语言机器学习金融
    目录1.专栏描述2.Kaggle竞赛列表2.1Eedi-MiningMisconceptionsinMathematics（持续更新中）1.专栏描述本专栏专注于记录与分享Kaggle竞赛的解题思路、项目框架及代码实现。通过通俗易懂的讲解和简单明了的测试数据，帮助每位读者轻松掌握参赛技巧，快速提升实战能力，一起探索数据科学的魅力！2.Kaggle竞赛列表2.1Eedi-MiningMisconcep
  • WZl补丁编辑器的实用指南 来朝三博士
    本文还有配套的精品资源，点击获取简介：WZl编辑器是一款为WZl客户端设计的专业补丁编辑工具，用于定制和优化游戏及软件程序功能。它支持补丁的创建与应用，二进制编辑，资源管理，版本控制，脚本语言支持，错误检查与调试，并提供社区支持。本指南旨在指导用户安全有效地使用该编辑器，强调备份原文件的重要性，并建议不断学习相关技术以深入掌握工具的使用。1.WZl编辑器简介1.1WZl编辑器的起源与发展WZl编辑
  • 常见的消息中间件以及应用场景 纠结哥_Shrek rabbitmqrocketmq
    消息中间件（MessageOrientedMiddleware，简称MOM）是支持消息传递的中间件，主要用于在分布式系统中实现不同应用之间的消息通信。常见的消息中间件有以下几种，每种都有不同的应用场景：1.RabbitMQ类型：基于AMQP协议的消息中间件。应用场景：任务调度：适用于需要任务分发和异步处理的场景，比如后台处理任务、日志处理等。微服务通信：用于解耦微服务之间的通信，保证服务间的高可用
  • 流媒体服务Nginx + RTMP 模块、Wowza Streaming Engine、Red5、SRS（Simple Real-time Server对比 纠结哥_Shrek nginx运维
    Nginx+RTMP模块、WowzaStreamingEngine、Red5和SRS（SimpleReal-timeServer）都是流媒体服务器，能够提供视频推流、拉流和直播分发等功能。每种流媒体服务器在性能、功能、配置和使用场景上都有不同的特点。下面是它们的对比：1.Nginx+RTMP模块简介：Nginx是一款高性能的Web服务器，RTMP模块是Nginx的一个插件，专门用于处理实时流媒体传
  • 用python写一个网格交易策略代码 一曲歌长安 python数据分析数据挖掘开发语言机器学习
    网格交易策略的python代码大致如下：导入需要的库importpandasaspd加载数据data=pd.read_csv("data.csv")定义一个函数，用于计算最优买入和卖出价格defcalculate_optimal_buy_sell_price(data,grid_size):#计算最低价和最高价low_price=data['low'].min()high_price=data['
  • 【Python学习之路】——Day20（Django 下） weixin_30758821 数据库pythonjavascriptViewUI
    Model到目前为止，当我们的程序涉及到数据库相关操作时，我们一般都会这么搞：创建数据库，设计表结构和字段使用MySQLdb来连接数据库，并编写数据访问层代码业务逻辑层去调用数据访问层执行数据库操作importMySQLdbdefGetList(sql):db=MySQLdb.connect(user='root',db='wupeiqidb',passwd='1234',host='localh
  • 架构师面试（七）：评论消息 棕生 架构师面试架构师面试评论消息信箱模型方案电话模型方案BP机模型方案
    问题在抖音客户端实时获取评论消息业务中，从用户体验和实现成本考虑，下面最优方案是哪一个？A.客户端发送心跳时拉取评论消息；B.服务端收到评论消息后，直接推送评论消息数据到当前客户端；C.客户端定时拉取评论消息；D.服务端收到评论消息后，推送通知到当前客户端，触发客户端立即拉取评论消息。解析A选项和C选项，都属于定时拉取方案，属于信箱模型，实时性低，不过实现简单（心跳方案实现更简单）；B选项，服务端
  • 在线教育平台架构设计 AI天才研究院 编程实践Python实战自然语言处理人工智能语言模型编程实践开发语言架构设计
    作者：禅与计算机程序设计艺术1.简介随着互联网的飞速发展，电子商务蓬勃发展，在线教育也成为火热话题。在线教育公司在做教育培训方面已经占据了大量的市场份额，他们通过各种方式让学习者在网上获得知识、技能和工具，提升个人能力。近年来，在线教育平台产品数量越来越多，复杂度也在不断增加，平台需要具备高可用、可扩展性、安全性、成本效益等优秀特性。因此，如何设计一个合适的在线教育平台，成为一个重要的课题。本文将
  • Linux基础知识：操作系统概述、常用命令、文件系统及Shell脚本入门与进阶 一碗黄焖鸡三碗米饭 Linux探索与实践linux运维服务器
    Linux基础知识：操作系统概述、常用命令、文件系统及Shell脚本入门与进阶Linux操作系统因其开源、稳定和高效的特点，广泛应用于各类服务器、嵌入式系统及开发环境中。对于开发者或系统管理员来说，掌握Linux的基础知识是必不可少的。本文将深入探讨Linux操作系统概述、常用命令的讲解、文件系统结构与权限管理，以及Shell脚本的入门与进阶，帮助你更好地理解和使用Linux。一、Linux操作系
  • 2025 年 DeepSeek 完全指南：掌握 100 个行业指令，提升运营能力！ 再见孙悟空_ 【2025AI学习从零单排系列】【2025AI工具合集】DeepSeekDeepSeek指令deepSeek提示词DeepSeek常用AI人工智能
    嘿，各位小伙伴们！在当下这个快节奏的时代，咱打工人都在想法设法提高工作效率，要是有个得力工具，那可就事半功倍啦。今天我要给大家唠唠DeepSeek这个超厉害的玩意儿，它堪称提升工作效率和运营能力的神器。我这儿有一份超详细的《DeepSeek喂饭指南》，里面精心整理了100个行业场景的使用指令，不管你是干啥工作的，都能从中找到适合自己的使用方法，赶紧搬好小板凳，听我细细道来。一、DeepSeek到底
  • 辗转相处求最大公约数 沐刃青蛟 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其他