Flutter深入浅出组件篇---TabBar

TabBar介绍

​ 一个显示水平行选项卡的Widget。 通常创建为 AppBar 的 AppBar.bottom 部分并与 TabBarView 结合使用

在什么情况下使用TabBar

​ 当你的app内容类别比较多的时候，我们常常会用到TabBar，例如网易新闻、京东、B站等，所以TabBar是一个使用非常频繁的组件。

示例代码

本文中很多效果都没有截图，可下载源代码运行项目 源代码地址，或者通过视频教程查看 视频教程地址

如何使用

步骤一：创建TabController

​ 为了使所选的 tab 与它所对应的内容能够同步变化，需要用 TabController 进行控制。我们既可以手动创建一个 TabController ，也能够直接使用 DefaultTabController widget。最简单的选择是使用 DefaultTabController widget，因为它能够创建出一个可供所有子 widgets 使用的 TabController。

DefaultTabController(
  // 选项卡的数量
  length: 3,
  child: // 在下一步完成此代码
);

步骤二：创建tabs

​ 当我们创建DefaultTabController, 接下来就可以用 TabBar widget 来创建 tabs。下面这个创建了包含三组 Tab widget 的 TabBar（一个），并把它放置于 AppBar widget 中。

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text("TabBar"),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_bike),),
          Tab(icon: Icon(Icons.directions_boat),),
          Tab(icon: Icon(Icons.directions_car),),
        ],
      ),
    ),
  ),
);

​ TabBar 默认将会在 Widget 树中向上寻找离它最近的一个 DefaultTabController 节点作为自己的 TabController。如果您想手动创建 TabController，那么您必须将它作为参数传给 TabBar。

步骤三：为每个Tab创建内容

​ 现在我们已经成功创建了一些 tabs，接下来要实现的是 tab 被选中时显示其对应的内容。为了实现这个效果，我们将使用 TabBarView widget。

import 'package:flutter/material.dart';

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("TabBar"),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_bike),),
              Tab(icon: Icon(Icons.directions_boat),),
              Tab(icon: Icon(Icons.directions_car),),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_bike),
            Icon(Icons.directions_boat),
            Icon(Icons.directions_car),
          ],
        ),
      ),
    );
  }
}

​ 从上面这个小例子中我们简单的体验了一下 TabBar 是怎么结合 TabBarView 来使用的。

DEMO效果

Flutter深入浅出组件篇---TabBar_第1张图片

TabBar属性和说明

总共20个属性
字段 属性 描述
tabs List 两个多个的Tab列表
controller TabController 控制tab的控制器
isScrollable bool 标签栏是否可以水平滚动
indicatorColor Color 设置选中Tab指示器的颜色
automaticIndicatorColorAdjustment bool 是否自动调整indicatorColor
indicatorWeight double 设置选中Tab指示器线条的粗细
indicatorPadding EdgeInsetsGeometry 设置选中Tab指示器间距，默认值为 EdgeInsets.zero
indicator Decoration 设置选中Tab指示器的外观
indicatorSize TabBarIndicatorSize 设置选中Tab指示器的大小
labelColor Color 设置选中Tab文字的颜色
labelStyle TextStyle 设置选中Tab文字的样式
labelPadding EdgeInsetsGeometry 设置选中Tab文字的间距
unselectedLabelColor Color 设置未选中Tab文字的颜色
unselectedLabelStyle TextStyle 设置未选中Tab文字的样式
dragStartBehavior DragStartBehavior 处理拖动开始行为的方式
overlayColor MaterialStateProperty 定义响应焦点、悬停和飞溅颜色
mouseCursor MouseCursor 鼠标指针进入或悬停在鼠标指针上时的光标
enableFeedback bool 检测到的手势是否应提供声音和/或触觉反馈
onTap ValueChanged 单击Tab时的回调
physics ScrollPhysics TabBar的滚动视图如何响应用户输入

TabBar属性详细使用

1、tabs

​ 由两个多个组成的Tab列表

使用方法

TabBar(
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

2、controller

​ 可以控制tab的控制器

使用方法

TabController _tabController;

@override
void initState() {
  // TODO: implement initState
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
}

TabBar(
  controller: _tabController,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

3、isScrollable

​ 标签栏是否可以水平滚动

使用方法

TabBar(
  isScrollable: false,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

4、indicatorColor

​ 设置选中Tab指示器的颜色

使用方法

TabBar(
  indicatorColor: Colors.red,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

5、automaticIndicatorColorAdjustment

​ 是否自动调整 indicatorColor，如果 automaticIndicatorColorAdjustment 为 true 时，那么indicatorColor 会自动调整成 Colors.white

使用方法

TabBar(
  automaticIndicatorColorAdjustment: false,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

6、indicatorWeight

​ 设置选中Tab指示器线条的粗细

使用方法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

7、indicatorPadding

​ 设置选中Tab指示器间距，默认值为 EdgeInsets.zero

使用方法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

8、indicator

​ 设置选中Tab指示器的外观

使用方法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  indicator: BoxDecoration(
    gradient: LinearGradient(colors: [
      Colors.orange,
      Colors.green
    ]),
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

9、indicatorSize

​ 设置选中Tab指示器的大小，该值是一个枚举类型，TabBarIndicatorSize.tab 跟随 Tab 的宽度，TabBarIndicatorSize.label 跟随 Tab 内容文字的宽度。

使用方法

TabBar(
  indicatorColor: Colors.red,
  indicatorSize: TabBarIndicatorSize.tab,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

10、labelColor

​ 设置选中Tab文字的颜色

使用方法

TabBar(
  indicatorColor: Colors.red,
  labelColor: Colors.pink,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

11、labelStyle

​ 设置选中Tab文字的样式

使用方法

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

12、labelPadding

​ 设置选中Tab内容的间距

使用方法

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  labelPadding: EdgeInsets.all(0),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

13、unselectedLabelColor

​ 设置未选中Tab文字的颜色

使用方法

TabBar(
    unselectedLabelColor: Colors.orange,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

14、unselectedLabelStyle

​ 设置未选中Tab文字的样式

使用方法

TabBar(
    unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

15、dragStartBehavior

​ 处理拖动开始行为的方式

使用方法

TabBar(
    unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  dragStartBehavior: DragStartBehavior.start,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

16、overlayColor

​ 定义响应焦点、悬停和飞溅颜色。

​ 如果非空，则会使用 MaterialState.focused, MaterialState.hovered, and MaterialState.pressed 之一进行解析。

17、mouseCursor

​ 鼠标指针进入或悬停在鼠标指针上时的光标，针对 Flutter web 应用。

使用方法

TabBar(
    unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  mouseCursor: SystemMouseCursors.allScroll,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

18、enableFeedback

​ 检测到的手势是否应提供声音和/或触觉反馈，默认为 true

使用方法

TabBar(
  enableFeedback: true,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

19、onTap

​ 单击Tab时的回调

使用方法

TabBar(
  enableFeedback: true,
  onTap: (index) {
    print(index);
  },
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

20、physics

​ TabBar的滚动视图如何响应用户输入，

​ 例如，确定在用户停止拖动滚动视图后滚动视图如何继续动画。

使用方法

TabBar(
  physics: NeverScrollableScrollPhysics(),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

总结

​ 以上是 TabBar 的属性详细解析并写了一个简单的 demo ，在平时的开发过程中 TabBar

组件用的还是相对比较频繁的，也是开发人员必须掌握的一个组件。

你可能感兴趣的:(flutter)

  • 2024年最全Flutter如何和Native通信-Android视角，Electron开发Android界面 2401_84544531 程序员android面试学习
    总结【Android详细知识点思维脑图（技能树）】其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。虽然Android没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明Android中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念 NewmanEdwarda2 前端ui数据库
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
  • Flutter函数 且听真言 Flutter函数的定义可选参数命名可选参数位置可选参数参数默认值词法闭包匿名函数
    在Dart中，函数为一等公民，可以作为参数对象传递，也可以作为返回值返回。函数定义//返回值(可以不写返回值，但建议写)、函数名、参数列表showMessage(Stringmessage){//函数体print(message);}voidshowMessage(Stringmessage){print(message);}可选参数位置参数：用方括号[]表示，参数根据位置传递给函数；voidsh
  • Flutter电商项目实践-架构设计 Zhouztashin Flutterflutter电子商务项目架构
    1、框架设计图框架设计总体说明整个框架划分成业务层、组件层、基础层与外部层。其中外部层对应着第三方或者自己封装的提供单独功能的依赖库，基础层主要对应着非UI的基础性功能，组件层对应着UI功能的基础性功能，可以向业务层提供完整可以使用的UI组件功能。业务层则是应用的核心，除了外部层之外，组件层、基础层以库的形式提供给业务层使用，这样的好处是提高了这两层的复用性。框架设计原则层级职责划分需要单一且清晰
  • flutter页面布局HTML,flutter笔记7：flutter页面布局基础，看完这篇就可以用flutter写APP了... 李致遠 flutter页面布局HTML
    不知不觉已经到了第7篇，然而很多萌新玩家可能还是不知道如何堆砌控件，像用CSS一样搭出漂亮的APP界面，我也一样，红红火火恍恍惚惚，直到今天含泪读完Flutter布局基础，仿佛打开了一个全新的世界。基本概念在flutter中，一切皆控件！一切皆控件！一切皆控件！牢牢记住这个概念。Text是控件，Image是控件，Icon是控件，布局脚手架也Scaffold也是控件，甚至整个APP也是控件。用户自定
  • Flutter 应用程序开发的优缺点 pxr007 flutterandroidui
    编者注：这篇文章于2022年9月19日更新，包含有关Flutter3.0的信息，以及通过有组织的文档和更快的应用程序开发来增加可访问性。如果您是一位经验丰富的移动应用程序开发人员，那么您已经决定为Android或iOS设备构建应用程序。如果您是初学者，您可能仍在考虑哪个是您的首选平台。这些决定决定了您在成为移动或跨平台应用程序开发人员的道路上应该学习哪些技术。无论您的应用程序开发之旅将您带到哪里，
  • flutter 泛型_Flutter入门——泛型 weixin_39627408 flutter泛型
    在查看基本数组类型List的API文档，会看到该类型实际上是List。表示法将List标记为泛型(或参数化)类型-具有正式类型参数的类型。按照惯例，大多数类型变量都有单字母名称，例如E，T，S，K和V.为什么要使用泛型类型安全通常需要泛型，除了允许让代码运行之外，还可以：正确指定泛型类型会生成更好的代码。例如，可以使用List(字符串列表)，来表示列表中只包含字符串，这样编译器就会启用类型检查，非
  • Flutter 升级3.22.3相关报错问题 明似水 flutterfluttercocoamacos
    Analyzingdependenciesfirebase_analytics:UsingFirebaseSDKversion'10.29.0'definedin'firebase_core'firebase_auth:UsingFirebaseSDKversion'10.29.0'definedin'firebase_core'firebase_core:UsingFirebaseSDKvers
  • Flutter PDFView：在Flutter应用中嵌入PDF阅读器 明似水 flutterflutterpdf
    FlutterPDFView：在Flutter应用中嵌入PDF阅读器在移动应用开发中，经常会遇到需要在应用内展示PDF文件的需求。Flutter作为一个跨平台的UI工具包，提供了丰富的包来满足开发者的各种需求。flutter_pdfview就是这样一个包，它允许开发者在iOS和Android平台上无缝地嵌入PDF阅读器。简介flutter_pdfview是一个原生的PDF查看器，支持iOS和And
  • 新版本flutter混编安卓没有flutter类 絮语时光 flutterflutterandroid
    Flutter升级到1.12后遇到的问题添加链接描述前些日子评论区里wangwhatlh同学反馈遇到了程序包io.flutter.facade不存在问题，起初我运行了一下之前的项目，发现可以正常运行，加上我自己有一段时间没有用过Flutter了，也就没太重视这个问题。说来也是惭愧，最近又陆续有多位小伙伴反馈了这个问题，我才终于意识到这是一个普遍性问题，简单查了一下了解到这个错误是Flutter1.
  • cross-plateform 跨平台应用程序-08-Ionic 介绍 老马啸西风 java
    跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
  • cross-plateform 跨平台应用程序-09-phonegap/Apache Cordova 介绍 老马啸西风 java
    跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
  • cross-plateform 跨平台应用程序-10-naitvescript 介绍 老马啸西风 java
    跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
  • cross-plateform 跨平台应用程序-02-有哪些主流技术栈？ 老马啸西风 java
    跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
  • cross-plateform 跨平台应用程序-01-概览 老马啸西风 java
    跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
  • Flutter 使用第三方包加载3d模型 AiFlutter flutter3d
    1.O3D（第三方包）这是一个用于以glTF和GLB格式呈现交互式3D模型的Flutter小部件。这个小部件在WebView中嵌入了Google的web组件。在线演示：O3DBabakCode3DUI特性渲染glTF和GLB模型；支持动画模型，具有可配置的自动播放设置；可选地支持将模型启动到AR查看器中；可选地自动旋转模型，具有可配置的延迟；支持小部件的可配置背景颜色。2.使用流程2.1添加依赖在
  • Flutter3备忘: GetX常用命令 mulegame Flutterflutter
    D:\flutter_app\getcreatepagesearch//创建一个firstPage在productContent目录中getcreateview:firstPageonproductContentgetcreateview:secondPageonproductContentgetcreateview:thirdPageonproductContentgetgeneratemode
  • Flutter框架高阶——Window应用程序设置窗体窗口背景完全透明 木颤简叶 Flutterflutterwindows开发语言后端笔记c++microsoft
    文章目录1.修改main.cpp1）C++与Win32API2）EnableTransparency()3）中文注释2.编写Flutter代码1）bitsdojo_window2）window_manager3）区别对比4）同时使用（1）设置初始化代码（2）处理冲突和集成Flutter的文件结构如下，找到图中的main.cpp的文件1.修改main.cppmain.cpp文件中的代码应该和下面差不
  • 探索高效Flutter开发新境界：flutter_getx_template 平奇群Derek
    探索高效Flutter开发新境界：flutter_getx_template在这个快节奏的数字时代，开发者们不断寻求更高效、更易维护的框架和技术来构建移动应用。Flutter，以其强大的跨平台能力和优美的声明式语法，已经成为了许多开发者的心头好。今天，我们将向您推荐一款基于GetX库的开源项目——flutter_getx_template，这是一款专为中大型Flutter项目设计的模板，让您的开发
  • flutter之：GetX 的 状态管理 神笔码靓
    1.状态管理目前，Flutter的几种状态管理器，大多数都涉及到使用ChangeNotifier来更新widget，这对于中大型应用的性能来说是一个糟糕的方法。在Flutter官方文档中查到，ChangeNotifier应该使用1个或最多2个监听器，这使得它实际上无法用于任何中等或大型应用。1.1其他的状态管理器的差别：BLoC非常安全和高效，但是对于初学者来说非常复杂，这使得人们无法使用Flut
  • Flutter类 且听真言 Flutter类定义及使用构造函数get/set修饰符对象操作符继承接口和抽象类Mixins（混入）
    Dart中的对象都继承自Object类，单继承（extend关键字）。Dart与Java、kotlin不同的是其无public、private、protected修饰符，默认public，通过在属性名、方法名前加_下划线来定义是否私有。实现一个简单的类classStudent{//默认publicfinalStringname;//默认publicfinalintage;Student(this.
  • cross-plateform 跨平台应用程序-05-Flutter 介绍 老马啸西风 java
    跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
  • flutter开发多端平台应用的探索 上（基本操作） 夏目艾拉 flutter设计模式javaandroid
    前言Flutter是一个跨平台的开发框架，它允许开发者使用相同的代码库来构建iOS、Android、Web和桌面应用程序。最近想了想，自己一直在用flutter开发特定端的应用，但是对于其他端的端特性case，如桌面端的菜单、多窗口、鼠标事件，需要怎么处理还没什么概念，本文旨在简单探索这方面的内容。正文首先就是判断平台了，可以通过如下方式import'dart:io'showPlatform;vo
  • Flutter学习之九 ListView MQ_Twist
    极端很容易，平衡才是最难的。Flutter学习之八Container前言Flutter中的ListView的地位，就好比于iOS中的UITableView，算是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持列表项懒加载（在需要时才会创建）。默认构造函数我们看看ListView的默认构造函数定义：ListView({...//可滚动widget公共参数AxisscrollD
  • Explore-Flutter-FireStore: 使用Flutter结合Firebase Firestore的实战指南 戴洵珠Gerald
    Explore-Flutter-FireStore:使用Flutter结合FirebaseFirestore的实战指南Explore-Flutter-FireStoreThisisaFlutterAppwithFirebase'sCloudFireStoreDatabaseandGoogleMap.ThisapprepresentsthatBeautifulUIcanbeimplementedwi
  • Flutter 自绘组件 （CustomPaint与Canvas）绘制虚线、区域、直线（一） goodhighting 程序员flutter前端javascript
    有人也许会疑惑，方案1和方案二不都是采用的绘制吗，那可不一定。有的时候解决问题，我们不遵循常规也可以解决问题，满足一时之需了。1、解决问题奇葩方式一：为什么奇葩呢？我们采用多个Container进行竖直或者水平排列完成了效果，至于性能上我们后面慢慢验证了。_lineContainer(){returnContainer(margin:EdgeInsets.only(top:2.0),color:C
  • flutter app_Flutter App中的错误处理 weixin_26638123 python
    flutterappPartofthe‘AWorkinProgress’Series“正在进行的工作”系列的一部分Today,I’mdemonstratinghowtheMVCframeworklibrarypackageisadaptiveandflexibleinitsimplementationofspecificneeds.Inthiscase,I’llshowyouhowtheframe
  • flutter构建桌面应用_使用Flutter Firebase Part I构建笔记记录应用程序 weixin_26727575 pythonjava
    flutter构建桌面应用I’mafanofGoogleKeep,I’vebeenusingitsinceitwaslaunched.Iputpendingtasks,remindersforchores,almostanythingneedstoremember,intoKeep.It’sintuitivetouse,helpsmestayfocusedonthepriorities.我是Goo
  • 如何使用Flutter为iOS和Android应用设置Firebase cukw6666 数据库androidjavapythonios
    Firebaseisagreatbackendsolutionforanyonethatwantstouseauthentication,databases,cloudfunctions,adsandcountlessotherfeatureswithinanapp.Luckilyforus,FlutterhasofficialsupportforFirebasewiththeFlutterFir
  • Flutter TextField - onChanged 值不会实时更新 小f要努力啦 Flutterflutter
    问题：今天用Flutter模拟一个登录注册，在判断账号和密码的时候发现即使TextField写了onChanged，绑定的值却不会实时更新。随便打几个字也不会显示不符合账号设定的条件，从print也看出来和输入框绑定的变量的值一直没有更新解决方法：在onChange下再加上setState函数，就可以实现实时更新了child:TextField(onChanged:(value){setState
  • ztree异步加载 3213213333332132 JavaScriptAjaxjsonWebztree
    相信新手用ztree的时候,对异步加载会有些困惑，我开始的时候也是看了API花了些时间才搞定了异步加载，在这里分享给大家。 我后台代码生成的是json格式的数据，数据大家按各自的需求生成，这里只给出前端的代码。 设置setting，这里只关注async属性的配置 var setting = { //异步加载配置
  • thirft rpc 具体调用流程 BlueSkator 中间件rpcthrift
    Thrift调用过程中，Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类，这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作：         （1）     将客户端程序调用的函数名和参数传递给协议层（TProtocol），协议
  • 异或运算推导, 交换数据 dcj3sjt126com PHP异或^
    /* * 5 0101 * 9 1010 * * 5 ^ 5 * 0101 * 0101 * ----- * 0000 * 得出第一个规律: 相同的数进行异或, 结果是0 * * 9 ^ 5 ^ 6 * 1010 * 0101 * ---- * 1111 * * 1111 * 0110 * ---- * 1001
  • 事件源对象 周华华 JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • MySql配置及相关命令 g21121 mysql
            MySQL安装完毕后我们需要对它进行一些设置及性能优化，主要包括字符集设置，启动设置，连接优化，表优化，分区优化等等。           一 修改MySQL密码及用户      
  • [简单]poi删除excel 2007超链接 53873039oycg Excel
          采用解析sheet.xml方式删除超链接，缺点是要打开文件2次,代码如下:      public void removeExcel2007AllHyperLink(String filePath) throws Exception { OPCPackage ocPkg = OPCPac
  • Struts2添加 open flash chart 云端月影
    准备以下开源项目： 1. Struts 2.1.6 2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009) 3. jofc2，这东西不知道是没做好还是什么意思，好像和ofc2不怎么匹配，最好下源码，有什么问题直接改。 4. log4j 用eclipse新建动态网站，取名OFC2Demo，将Struts2 l
  • spring包详解 aijuans spring
    下载的spring包中文件及各种包众多，在项目中往往只有部分是我们必须的，如果不清楚什么时候需要什么包的话，看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包，关于发布包下面会详细进行说明。 docs&nb
  • 网站推广之seo概念 antonyup_2006 算法Web应用服务器搜索引擎Google
       持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时，准备了解下网站的推广分析策略。     所谓网站推广，目的在于让尽可能多的潜在用户了解并访问网站，通过网站获得有关产品和服务等信息，为最终形成购买决策提供支持。     网站推广策略有很多，seo，email，adv
  • 单例模式,sql注入,序列 百合不是茶 单例模式序列sql注入预编译
      序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时 需要使用序列创建一个自增长的字段  居然不会了,所以将序列写在本篇的前面    1,序列是一个保存数据连续的增长的一种方式; 序列的创建; CREATE SEQUENCE seq_pro 2 INCREMENT BY 1 -- 每次加几个 3
  • Mockito单元测试实例 bijian1013 单元测试mockito
    Mockito单元测试实例： public class SettingServiceTest { private List<PersonDTO> personList = new ArrayList<PersonDTO>(); @InjectMocks private SettingPojoService settin
  • 精通Oracle10编程SQL(9)使用游标 bijian1013 oracle数据库plsql
    /* *使用游标 */ --显示游标 --在显式游标中使用FETCH...INTO语句 DECLARE CURSOR emp_cursor is select ename,sal from emp where deptno=1; v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; begin ope
  • 【Java语言】动态代理 bit1129 java语言
      JDK接口动态代理 JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式，为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联   package com.tom; import com.tom.model.User; import com.tom.service.IUserService;
  • Java通信之URL通信基础 白糖_ javajdkwebservice网络协议ITeye
    java对网络通信以及提供了比较全面的jdk支持，java.net包能让程序员直接在程序中实现网络通信。 在技术日新月异的现在，我们能通过很多方式实现数据通信，比如webservice、url通信、socket通信等等，今天简单介绍下URL通信。 学习准备：建议首先学习java的IO基础知识   URL是统一资源定位器的简写，URL可以访问Internet和www，可以通过url
  • 博弈Java讲义 - Java线程同步 (1) boyitech java多线程同步锁
      在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件，共用数据库连接，全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。    同步不仅可以阻止一个线程看到对象处于不一致的状态，它还可以保证进入同步方法或者块的每个线程，都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件（cri
  • java-给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 bylijinnan java
    public class DeleteExtraSpace { /** * 题目：给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 * 方法1.用已有的String类的trim和replaceAll方法 * 方法2.全部用正则表达式，这个我不熟 * 方法3.“重新发明轮子”，从头遍历一次 */ public static v
  • An error has occurred.See the log file错误解决！ Kai_Ge MyEclipse
    今天早上打开MyEclipse时，自动关闭！弹出An error has occurred.See the log file错误提示！ 很郁闷昨天启动和关闭还好着！！！打开几次依然报此错误，确定不是眼花了！ 打开日志文件！找到当日错误文件内容： --------------------------------------------------------------------------
  • [矿业与工业]修建一个空间矿床开采站要多少钱? comsci
           地球上的钛金属矿藏已经接近枯竭...........        我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床.....        那么,现在要编制一个预算,提交给财政部门..
  • 解析Google Map Routes dai_lm google api
    为了获得从A点到B点的路劲，经常会使用Google提供的API，例如 [url] http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false [/url] 从返回的结果上，大致可以了解应该怎么走，但
  • SQL还有多少“理所应当”？ datamachine sql
    转贴存档，原帖地址：http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html！ ------------------------------------华丽的分割线--------------------------------
  • Yii使用Ajax验证时，如何设置某些字段不需要验证 dcj3sjt126com Ajaxyii
    经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如: $form=$this->beginWidget('CActiveForm', array(        'id'=>'usuario-form',&
  • 使用git同步网站代码 dcj3sjt126com crontabgit
    转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com   管理一网站，最开始使用的虚拟空间，采用提供商支持的ftp上传网站文件，后换用vps，vps可以自己搭建ftp的，但是懒得搞，直接使用scp传输文件到服务器，现在需要更新文件到服务器，使用scp真的很烦。发现本人就职的公司，采用的git+rsync的方式来管理、同步代码，遂
  • sql基本操作 蕃薯耀 sqlsql基本操作sql常用操作
    sql基本操作 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:30:33 星期一     &
  • Spring4+Hibernate4+Atomikos3.3多数据源事务管理 hanqunfeng Hibernate4
    Spring3+后不再对JTOM提供支持，所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考：http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站：http://www.atomikos.com/   一.pom.xml <dependency> <
  • jquery中两个值得注意的方法one()和trigger()方法 jackyrong trigger
      在jquery中，有两个值得注意但容易忽视的方法，分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍 1） one方法     one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数，格式为    one(type,${data},fn) &nb
  • 拿工资不仅仅是让你写代码的 lampcy 工作面试咨询
    这是我对团队每个新进员工说的第一件事情。这句话的意思是，我并不关心你是如何快速完成任务的，哪怕代码很差，只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。 这个说法其实很合理：我们的工作是思考客户提出的问题，然后制定解决方案。思考第一，代码第二，公司请我们的最终目的不是写代码，而是想出解决方案。 话粗理不粗。 付你薪水不是让你来思考的，也不是让你来写代码的，你的目的是交付产品
  • 架构师之对象操作----------对象的效率复制和判断是否全为空 nannan408 架构师
    1.前言。   如题。 2.代码。 (1)对象的复制，比spring的beanCopier在大并发下效率要高，利用net.sf.cglib.beans.BeanCopier Src src=new Src(); BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false);
  • ajax 被缓存的解决方案 Rainbow702 JavaScriptjqueryAjaxcache缓存
    使用jquery的ajax来发送请求进行局部刷新画面，各位可能都做过。 今天碰到一个奇怪的现象，就是，同一个ajax请求，在chrome中，不论发送多少次，都可以发送至服务器端，而不会被缓存。但是，换成在IE下的时候，发现，同一个ajax请求，会发生被缓存的情况，只有第一次才会被发送至服务器端，之后的不会再被发送。郁闷。 解决方法如下： ① 直接使用 JQuery提供的 “cache”参数，
  • 修改date.toLocaleString()的警告 tntxia String
      我们在写程序的时候，经常要查看时间，所以我们经常会用到date.toLocaleString()，但是date.toLocaleString()是一个过时 的API，代替的方法如下：   package com.tntxia.htmlmaker.util; import java.text.SimpleDateFormat; import java.util.
  • 项目完成后的小总结 xiaomiya js总结项目
    项目完成了，突然想做个总结但是有点无从下手了。 做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。 先说说项目主要实现的功能吧 1，按键精灵 2，获取行情数据 3，各种input输入条件判断 4，发送数据（有json格式和string格式） 5，获取预警条件列表和预警结果列表， 6，排序， 7，预警结果分页获取 8，导出文件（excel，text等） 9，修
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他