锦鲤跃龙
锦鲤跃龙

Flutter常用组件学习以及官方demo

flutter

前言

demo地址

由于我电脑一直没搞好as，（主要是Android sdk的问题），所以用的vs开发学习，而且vs相比as轻量好多。
vs的配置看这里，而且还有一个好处是相对于有很多嵌套的flutter而言，他会自动在添加尾注，比较容易找嵌套。如图

image.png

as安装好了，我的电脑一直没装好是因为我曾经改了本地电脑host文件，把下载sdk的网址给重定向了。改回来按照挂网下载，一步一步就好了。修改hosts方法

mac电脑脚本启动安卓模拟器

每次看安卓效果，还需要先启动as，太麻烦。接下来只需要用脚本就行了

//进入Android tools目录
cd ~/Android/sdk1/android-sdk-macosx/tools
//查看模拟器列表
 emulator -list-avds  
Nexus_5X_API_26
//启动模拟器
 emulator @Nexus_5X_API_26
image.png

mac电脑脚本启动simulator模拟器

open -a Simulator

至于选择模拟器列表，我目前还不清楚，有知道的小伙伴麻烦告知一下

vscode多个模拟器选择

May-01-2019 18-43-49.gif

ps 这篇文章是针对初学者，先简单上手，不会每个讲的很细。

正文

常用组件的思维导图


思维导图

1.Text文字组件

demo代码

import 'package:flutter/material.dart';

//基本组件的使用 1.Text 2.Container
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text widget",
      home: Scaffold(
        body: Center(
            child: Text(
            "hello lyj 今天的天气不错，我要出去玩呀呀。但是我要学习，我爱学习。学习使我快乐，今天开始学习flutters",
            textAlign: TextAlign.center,
            // maxLines: 1,
            // overflow: TextOverflow.ellipsis,
            style:TextStyle(
              color: Color.fromRGBO(28, 29, 120, 1),
              fontSize: 14,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid//实线
              ) ,
            ),
           
          
        ),
      ),
    );
  }

}

效果图


效果图

StatefulWidget： 具有可变状态的窗口部件，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。
StatelessWidget：代表只有一种状态的组件，不可变状态窗口部件，也就是你在使用时不可以改变，比如固定的文字（写上后就在那里了，死也不会变了）。
在Widget组件中都是通过build方法来描述自己的内部结构。这里的build表示构建MyApp中使用的是MaterialApp的系统组件。

home标签的值：Scaffold是Material library 中提供的一个组件,我们可以在里面设置导航栏、标题和包含主屏幕widget树的body属性。可以看到这里是在页面上添加了AppBar和一个Text。
Center是一个可以把子组件放在中心的组件

常用属性

TextAlign属性

center: 文本以居中形式对齐
left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
right :右对齐，使用频率也不算高。
start:以开始位置进行对齐，类似于左对齐。
end: 以为本结尾处进行对齐，不常用。有点类似右对齐.

maxLines属性

顾名思义就是行数了，如果不写就是多行了

overflow属性

overflow属性是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。

  • clip：直接切断，剩下的文字就没有了。
  • ellipsis:在后边显示省略号，这个在工作中经常使用。

  • fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦。
    其中fade效果如图


    fade效果

style属性

常用的有

  • fontSize大小
  • Color颜色
  • fontWeight加粗之类
  • fontFamily字体类别 类似于ios中fontName 关于自定义字体 这里
  • decoration 装饰字体，可以配置下划线、删除线等等，一般和'decorationStyle'配置使用，例如demo

属性比较多,可以查看api https://docs.flutter.io/flutter/painting/TextStyle-class.html

2.Container组件

Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。container类似于html中的div

demo代码

  import 'package:flutter/material.dart';

//基本组件的使用 1.Text 2.Container
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text widget",
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
            "hello lyj 今天的天气不错，我要出去玩呀呀。但是我要学习，我爱学习。学习使我快乐，今天开始学习flutters",
            textAlign: TextAlign.center,
            // maxLines: 1,
            // overflow: TextOverflow.ellipsis,
            style:TextStyle(
              color: Color.fromRGBO(28, 29, 120, 1),
              fontSize: 14,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid//实线
              ) ,
            ),
            alignment: Alignment.center,
            width: 500,
            height: 100,
            // color: Colors.red,
            // padding: const EdgeInsets.all(10.0),
            padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),//内编剧
            margin: const EdgeInsets.all(10.0),//外边距
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              ),
              border: Border.all(color: Colors.red,width: 2),
              borderRadius: BorderRadius.circular(50)
            ), 
          )
        ),
      ),
    );
  }
}

效果图


image.png

常用属性

alignment属性

bottomCenter:下部居中对齐。
botomLeft: 下部左对齐。
bottomRight：下部右对齐。
center：纵横双向居中对齐。
centerLeft：纵向居中横向居左对齐。
centerRight：纵向居中横向居右对齐。
topLeft：顶部左侧对齐。
topCenter：顶部居中对齐。
topRight： 顶部居左对齐。

width和height设置宽和高；color设置背景色

padding内编剧

常用的方法有

  • EdgeInsets.all(10.0)标识上下左右都是10
  • EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以满足我们的需求，LTRB分别代表左、上、右、下

margin外边距用法类似于padding,可以看demo，有外边距

decoration修饰器，主要的功能是设置背景和边框，例如demo添加了一个红色的边框以及渐变的颜色（需要注意的是如果你设置了decoration，就不要再设置color属性了，因为这样会冲突）

3. Image组件

放置图片的组件
demo

import 'package:flutter/material.dart';

//3.iamge
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text widget",
      home: Scaffold(
        body: Center(
            child: ListView(
          children: [
            Container(
              child: Image.network(
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555747523962&di=a1c0b1b4f8561a79e5dcb4a7409b022c&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png",
                scale: 1.0,
                fit: BoxFit.contain,
                color: Colors.greenAccent,
                colorBlendMode: BlendMode.darken,
                repeat: ImageRepeat.repeatY,
              ),
              // alignment: Alignment.center,
              width: 500,
              height: 400,
              color: Colors.red,
              // padding: const EdgeInsets.all(10.0),
            ),
             Container(
              child: Image.asset(
                'images/Apr-27-2019 16-03-03.gif',
                scale: 1.0,
              ),
              // padding: const EdgeInsets.all(10.0),
            ),
          ],
        )),
      ),
    );
  }
}

效果图


Apr-27-2019 21-40-26.gif

加入图片的几种方式

  • Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。相当于ios工程中的Assets.xcassets。
  • Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。相当于ios中的常用的sdwebimage
  • Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
  • Image.memory: 加载Uint8List资源图片

加载资源图片 需要用到pubspec.yaml文件
如果想配置项目资源文件，就需要使用pubspec.yaml文件，需要把资源文件在这里声明。
比如在项目根目录下新建了一个images文件夹，文件夹下面放了一个图片，图片的名称叫做Apr-27-2019 16-03-03.gif，那我们在pubspec.yaml文件里就要写如下代码进行声明。

assets:
   - images/Apr-27-2019 16-03-03.gif

代码里

Image.asset(
                'images/Apr-27-2019 16-03-03.gif',
                scale: 1.0,
                fit: BoxFit.fill,
              )

fit属性

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的
这里和ios中的UIimageview.contentmode比较

  • BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 相当于UIViewContentModeScaleToFill
  • BoxFit.contain:全图显示，显示原比例，可能会有空隙。 UIViewContentModeScaleAspectFit
  • BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。 UIViewContentModeScaleAspectFill
  • BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
  • BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
  • BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

colorBlendMode混合模式，flutter有一个可以和颜色color配合使用，可以让图片改变颜色

colorBlendMode混合模式 很多可以看官方api,这个和ios中CGBlendMode的文档很类似

repeat图片重复

  • ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
  • ImageRepeat.repeatX: 横向重复，纵向不重复。
  • ImageRepeat.repeatY：纵向重复，横向不重复。
    demo中用的就是纵向重复

4. ListView组件

相当于ios中的tableview
demo

import 'package:flutter/material.dart';

//3.listView 相当于tableview 纵向
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text widget",
      home: Scaffold(
        appBar: AppBar(
          title: Text('listview'),
        ),
        body:  ListView(
        
          children: [
            ListTile(
              title: Text('access_time'),
              leading: Icon(Icons.access_time),
            ),
            ListTile(
              leading: Icon(Icons.account_balance),
              title: Text('account_balance'),
            ),
            new Image.network(
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555747523962&di=a1c0b1b4f8561a79e5dcb4a7409b022c&imgtype=0&src=http%3A%2F%2Fp0.ssl.qhimg.com%2Ft01c3f5bf72e7d1ac67.png'
                ),
            new Image.network(
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4214474476,1941437198&fm=26&gp=0.jpg'
                ),
          
          ],
        ),
      ),
    );
  }
}

效果图


image.png

在flutter中如果可以存放一个元素的话一般是child，可以存放多个的话为children，所以ListView用children来初始化一个数组demo中用了官方的ListTile类似于ios中提供的原生官方cell。

横向列表只需要修改属性scrollDirection属性

Axis.horizontal:横向滚动或者叫水平方向滚动。
Axis.vertical:纵向滚动或者叫垂直方向滚动。
例如

import 'package:flutter/material.dart';

//3.listView 横向 优化代码
void main() => runApp(new MyApp());

/* mylist */
class Mylist extends  StatelessWidget{
  
  @override
  Widget build(BuildContext context) {

    return ListView(
            scrollDirection: Axis.horizontal,
          children: [
            Container(
              width: 100,
              color: Colors.lightBlue,
            ),
            Container(
              width: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              color: Colors.yellow,
            ), Container(
              width: 100,
              color: Colors.lightBlue,
            ),
            Container(
              width: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              color: Colors.yellow,
            )
          ],
        );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Text widget",
      home: Scaffold(
        appBar: AppBar(
          title: Text('listview'),
        ),
        body: Container(
          height:300 ,
          child: Mylist()
        )
      ),
    );
  }
}

image.png

在这个横向demo中把初始化的listview单独拿出来，可以减少代码的嵌套。

5. GridView组件

使用GridView将widget放置为二维列表。 GridView提供了两个预制list，或者您可以构建自定义网格。当GridView检测到其内容太长而不适合渲染框时，它会自动滚动。类似于ios中collectionView

import 'package:flutter/material.dart';

//4.GridView
void main () => runApp(MyApp());

class MYGridView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
          padding:EdgeInsets.all(2),//外部容器的边距
          crossAxisCount: 3,
          crossAxisSpacing: 10,
          mainAxisSpacing: 5.0,
          childAspectRatio: 2,
          children: [
            Container(
              color: Colors.red,
              child: Text(
                '我是李雁军1',
              textAlign: TextAlign.center,),
              alignment: Alignment.center,  
            ),
            Container(
              color: Colors.red,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.red,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.yellow,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.yellow,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.yellow,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.blue,
              child: Text('我在中国'),
            )
          ],
          );
  }
}

class MyGridView2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 10,
        mainAxisSpacing: 5.0,
        childAspectRatio: 0.7
      ),
      children: [
         Container(
              color: Colors.red,
              child: Text(
                '我是李雁军1',
              textAlign: TextAlign.center,),
              alignment: Alignment.center,  
            ),
            Container(
              color: Colors.red,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.red,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.yellow,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.yellow,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.yellow,
              child: Text('我是李雁军'),
            ),
            Container(
              color: Colors.blue,
              child: Text('我在中国'),
            )
      ],
    );
  }
}


class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "GridView",
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView') ,
        ),
        body:MyGridView2()
      ),
    );
  }

}
image.png

使用GridView将widget放置为二维列表。 GridView提供了两个预制list，或者您可以构建自定义网格。当GridView检测到其内容太长而不适合渲染框时，它会自动滚动。

  • 在网格中放置widget
  • 检测列内容超过渲染框时自动提供滚动
  • 构建您自己的自定义grid，或使用一下提供的grid之一:
    • GridView.count 允许您指定列数
    • GridView.extent 允许您指定项的最大像素宽度

demo中用了GridView.count和 自定义两个方法
常用属性

  • padding:表示内边距，这个小伙伴们应该很熟悉。
  • crossAxisCount:网格的列数，相当于一行放置的网格数量。
  • crossAxisSpacing:表示每个网格横向之间的间距。
  • mainAxisSpacing:表示网格纵向的间隔
  • scrollDirection:类似于ListView也可以设置方向。不过方向变了只会，相应的crossAxisSpacing和mainAxisSpacing对调一下
  • childAspectRatio:宽高比，这个值的意思是宽是高的多少倍，如：2.0表示款式高的2倍。

6.Row水平布局组件

Row表示水平布局，水平放置几个组件

import 'package:flutter/material.dart';

//6.Row
void main() => runApp(MyApp());

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      children: [
        Expanded(
            child: RaisedButton(
                onPressed: () {
                  print('点击');
                },
                color: Colors.redAccent,
                child:  Text('红色按钮'))),
        Expanded(
            child: RaisedButton(
                onPressed: () {
                  print('点击');
                },
                color: Colors.yellow,
                child:  Text('黄色按钮'))),
        Expanded(
            child: RaisedButton(
                onPressed: () {
                  print('点击');
                },
                color: Colors.blueAccent,
                child:  Text('蓝色按钮'))),
        Expanded(
            child: RaisedButton(
                onPressed: () {
                  print('点击');
                },
                color: Colors.greenAccent,
                child: new Text('绿色按钮')))
      ],
    );
  }
}

//第一列按照大小 剩下的平均
class MyRow1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      children: [
         RaisedButton(
                onPressed: () {
                  print('点击');
                },
                color: Colors.redAccent,
                child:  Text('红色按钮hahhahh')),
        Expanded(
            child: RaisedButton(
                onPressed: () {
                  print('点击');
                },
                color: Colors.yellow,
                child:  Text('黄色按钮'))),
        Expanded(
            child: RaisedButton(
                onPressed: () {
                  print('点击');
                },
                color: Colors.blueAccent,
                child:  Text('蓝色按钮'))),
       Expanded(
            child: RaisedButton(
                onPressed: () {
                  print('点击');
                },
                color: Colors.pink,
                child:  Text('红色按钮')))
      
      ],
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "GridView",
      home: Scaffold(
          appBar: AppBar(
            title: Text('Row横向布局'),
          ),
          body: MyRow()),
    );
  }
}

效果图

image.png

这里介绍一下Expanded组件，Expanded会把平分Expanded所占的空间，demo里MyRow就是平分4个按钮

如果不放在Expanded里面，就会按照内容撑开，如MyRow1。效果

image.png

7.Column垂直布局组件

相对于Row组件，Column是垂直方向的布局

import 'package:flutter/material.dart';

//6.Column
void main() => runApp(MyApp());

class MyColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start, //副轴
      mainAxisAlignment: MainAxisAlignment.center, //主轴
      children: [
        Container(
            color: Colors.redAccent,
            height: 60,
            width: MediaQuery.of(context).size.width,
            child: Text('我是lyj，哈哈哈')),
        Container(color: Colors.blue, child: Text('这里是垂直布局'),
         width: MediaQuery.of(context).size.width,
        ),
        Container(color: Colors.yellowAccent, child: Text('今天天气有点小雨，要在家里学习'),
         width: MediaQuery.of(context).size.width

        )
      ],
    );
  }
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Column纵向布局1",
      home: Scaffold(
          appBar: AppBar(
            title: Text('Column纵向布局'),
          ),
          body:  MyColumn()
          ),
    );
  }
}s

效果图


image.png

MediaQuery.of(context).size.width表示屏幕的宽度

主轴和副轴的辨识
demo里有mainAxisAlignment属性，意思就是主轴对齐方式，那什么是主轴，什么又是幅轴那。
main轴：如果你用column组件，那垂直就是主轴，如果你用Row组件，那水平就是主轴。
cross轴：cross轴我们称为幅轴，是和主轴垂直的方向。比如Row组件，那垂直就是幅轴，Column组件的幅轴就是水平方向的。

enum MainAxisAlignment {
//将子控件放在主轴的开始位置
start,
//将子控件放在主轴的结束位置
end,
//将子控件放在主轴的中间位置
center,
//将主轴空白位置进行均分，排列子元素，手尾没有空隙
spaceBetween,
//将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
spaceAround,
//将主轴空白区域均分，使各个子控件间距相等
spaceEvenly,
}

我们把副轴设置为center，主轴设置为start，其中一个宽度设置300，否则看不出效果

crossAxisAlignment: CrossAxisAlignment.center,//副轴
mainAxisAlignment: MainAxisAlignment.start, //主轴
image.png

8.Stack层叠布局组件

  • 用于与另一个widget重叠的widget
  • 子列表中的第一个widget是base widget; 随后的子widget被覆盖在基础widget的顶部
  • Stack的内容不能滚动
  • 您可以选择剪切超过渲染框的子项
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
var myStack = Stack(
      alignment: const FractionalOffset(0.5, 0.8),
      children: [
        CircleAvatar(
          backgroundColor: Colors.redAccent,
          radius: 100,
        ),
         Container(
            decoration: new BoxDecoration(
              color: Colors.lightBlue,
            ),
            padding: EdgeInsets.all(5.0),
            child: new Text('李雁军'),
          )
      ],
    );

    return MaterialApp(
      title: "stack布局",
      home: Scaffold(
          appBar: AppBar(
            title: Text('stack布局'),
          ),
          // body: Center(child: Mystack1())),
       body: Center(child: myStack)),
    );
  }
}

效果图


image.png

如果一共有2个组件，可以使用alignment属性，标识第二个相对于第一个位置，数值都是从0到1。如demo中的myStack，水平居中，垂直考下些

image.png

如果一共有2个以上组件，可以使用Positioned组件包含子组件，如Mystack1
Positioned组件的属性

  • bottom: 距离层叠组件下边的距离
  • left：距离层叠组件左边的距离
  • top：距离层叠组件上边的距离
  • right：距离层叠组件右边的距离
  • width: 层叠定位组件的宽度
  • height: 层叠定位组件的高度

综合练习（官方demo）

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: '官网的布局',
      home: MyHomeScreen(),
    ));

//屏幕部分
//1.第二行
class SecondLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.blue[300],
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                    padding: const EdgeInsets.only(bottom: 8),
                    child: Text('Oeschinen Lake 重复的多写几句看看重复的多写几句看看重复的多写几句看看',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.black))),
                Text('Kandersteg, Switzerland',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.grey[500])),
              ],
            ),
          ),
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          new Text('41'),
        ],
      ),
    );
  }
}

//第三行
class ThirdLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    MaterialButton buildButtonColumn1(IconData icon, String label) {
      Color color = Theme.of(context).primaryColor;
      return MaterialButton(
        onPressed: () => {print('$label被点击')},
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, color: color),
            Container(
              margin: const EdgeInsets.only(top: 8.0),
              child: new Text(label,
                  style: TextStyle(
                    fontSize: 12.0,
                    fontWeight: FontWeight.w400,
                    color: color,
                  )),
            )
          ],
        ),
      );
    }

    return Container(
      padding: const EdgeInsets.fromLTRB(40, 10, 40, 10),
      // color: Colors.red,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Expanded(
            child: Container(
              // color: Colors.blueGrey,
              child: buildButtonColumn1(Icons.call, 'CALL'),
            ),
          ),
          Expanded(
            child: Container(
              // color: Colors.yellow,
              child: buildButtonColumn1(Icons.near_me, 'ROUTE'),
            ),
          ),
          Expanded(
            child: Container(
              // color: Colors.pink,
              child: buildButtonColumn1(Icons.share, 'SHARE'),
            ),
          )
        ],
      ),
    );
  }
}

class FourLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(32.0),
      child: Text(
        '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
        ''',
        style: TextStyle(
            fontSize: 12.0, fontWeight: FontWeight.normal, color: Colors.grey),
      ),
    );
  }
}

class MyHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('首页'),
        ),
        body: ListView(
          children: [
             Image.network(
                  'https://upload-images.jianshu.io/upload_images/5157505-d19846f019de6e3c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000',
                  width: MediaQuery.of(context).size.width,
                  height: 200,
                  scale: 1,
                ),
                SecondLine(),
                ThirdLine(),
                FourLine()
          ],
        ));
  }
}

效果


demo
image.png

官方用的Column，我这里用的ListView和MaterialButton实现可以滑动以及点击的效果。

你可能感兴趣的:(Flutter常用组件学习以及官方demo)

  • 美易官方：盘前道指期货涨0.5%，游戏驿站跌逾15% 美股投资 财经人工智能大数据新浪微博微信微信公众平台百度金融
    在股市开盘前的交易时段，道指期货上涨了0.5%，而游戏驿站（GameStop）的股价却出现了大幅下跌，跌幅超过15%。这一市场动态引发了投资者的广泛关注，也反映了当前股市的复杂性和不确定性。美股股指期货周三盘前走强，交易员为季度末的再平衡做准备。本周因假期而缩短，美国将公布关键通胀数据。道指期货涨0.5%，标普500指数期货涨0.6%，纳指期货涨0.5%。德国DAX指数涨0.4%，英国富时100指
  • 【Python】一文详细介绍 py格式 文件 高斯小哥 Python基础【高质量合集】python新手入门学习
    【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py
  • 大学播音主持都学什么内容？播音主持专业学什么？ 配音新手圈
    有些喜欢播音主持并且犹豫要不要报考这个大学专业的小伙伴们就会想要了解大学播音主持都学什么内容吧，毕竟如果不够了解就直接选择这个专业真的等选择完进去学习以后才知道这个专业并不是自己想要学习的东西那就来不及了。下面是小编为大家整理出来的一些播音主持专业学习的内容，请往下看吧。大学播音主持专业主要学习的课程有：播音发声、播音创作基础、广播播音主持、电视播音主持、文艺作品演播学概论、新闻学概论、新闻采编、
  • Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法 江上清风山间明月 FlutterandroidiosflutterKeepAlive屏幕常亮wakelock熄屏
    文章目录Flutter应用让屏幕在app运行期间保持常亮的方法方法一：使用系统插件方法二：使用Widgets注意事项Flutter应用让屏幕在app运行期间保持常亮的方法在Flutter开发中，可以使用以下两种方法让屏幕在app运行期间保持常亮：方法一：使用系统插件Flutter社区中已经有很多相关插件可供使用，比如wakelock:https://pub.dev/packages/wakeloc
  • 3/31总结 静心第一
    今日总结：1.上午体验课以及反馈2.p1专注力上课3.情绪精品营上课4.燕子营队辅营以及前台值班5.活动室带孩子接待带到访今日反思：1.合理安排体力2.对于准客户记得跟进3.不要放过每一次成交的机会（这个精品营转发有点失败，后期需调整）今日感受：1.为了效果，后期课程一定想方设法布置家庭，给予一个好的支持系统2.上到下午的课程感觉特别特别的累3.晚上在做辅营一个孩子大声叫喊，后来单独出去沟通，其实
  • Flink中的SQL Client和SQL Gateway BigDataMLApplication flinkflinksqlgateway
    Flink中的SQLClient和SQLGateway对比目录定义基本原理适用场景主要区别常用运维命令示例官方链接正文1.定义SQLClient：FlinkSQLClient是一种用于提交和执行FlinkSQL语句的命令行界面或图形界面工具。SQLGateway：FlinkSQLGateway是一个独立的服务，它允许客户端通过RESTfulAPI将SQL查询提交到Flink集群。2.基本原理SQL
  • 拼多多纸巾推荐：品质与性价比的完美结合 氧惠帮朋友一起省
    拼多多纸巾推荐拼多多纸巾返现怎么做在我们的日常生活中，纸巾已经成为不可或缺的用品。无论是在家庭、办公室还是旅途中，纸巾都是我们随时随地需要的物品。随着电商平台的兴起，越来越多的人选择在网上购买纸巾。其中，拼多多作为国内知名的电商平台之一，以其独特的社交电商模式和实惠的价格吸引了大量用户。今天，我们就来探讨如何在拼多多上选择品质优良、性价比高的纸巾，以及如何通过一些小技巧来获取更多的优惠。一、品质与
  • 新网师的精神肤色（幕布笔记） 悦读书香
    王子老师的《极简100小妙招》收到已经几天了，之前大概的浏览了全书，今天起给自己定了一个计划，必须每天学习极简小妙招里面的一个妙招，并加以运用。一、今天要打卡什么内容因有完成每天学习极简小妙招的计划，所以今天晚饭吃的比较简单，草草吃完以后带着小宝到广场溜达一圈，急忙赶回来学习极简小妙招。再重看的时候不知道自己要学点什么，打卡哪一招，感觉哪个都简单，就看这一环节像王子老师说的“一看就会”，但做这一环
  • 学习JavaEE的日子 Day32 线程池 A 北枝 学习JavaEE学习java-eejava线程池
    Day32线程池1.引入一个线程完成一项任务所需时间为：创建线程时间-Time1线程中执行任务的时间-Time2销毁线程时间-Time32.为什么需要线程池(重要)线程池技术正是关注如何缩短或调整Time1和Time3的时间，从而提高程序的性能。项目中可以把Time1，T3分别安排在项目的启动和结束的时间段或者一些空闲的时间段线程池不仅调整Time1，Time3产生的时间段，而且它还显著减少了创建
  • 淘宝天猫38节活动时间和玩法，2024年焕新周满减优惠多少 小小编007
    在2024年，淘宝天猫平台即将迎来一年一度的38节活动，这是广大消费者们翘首以待的购物狂欢节。在这篇文章中，我们将为您详细解读淘宝天猫38节活动的时间安排和玩法，以及2024年焕新周的满减优惠力度。一、淘宝天猫38节活动时间2024年淘宝天猫38节活动将于2月28日正式启动，持续至3月8日，为期10天。活动期间，消费者们可以尽情享受各种优惠折扣、满减活动以及限时秒杀，尽情释放购物热情。2024淘宝
  • 所有的突然想起，都是一直放在心里 清浅白芷
    一天，看到朋友圈发了一张木林的图片，熟悉而又陌生，心里怔住了一下，突然想起他以及往事。想起那年我们在旅途认识，而后又因旅途分开的故事。点点滴滴，在脑海里盘旋，在回忆里辗转。还记得相遇的那天，因为他的幽默风趣，把全场疲惫不堪的人逗笑了，他笑起来的样子不是很好看，但感觉很舒服。后来我们通过在网上联系，加深了对彼此的了解，便互生情愫，然后恋爱。只是后来，经过一年多的相处，我们就分开了。虽然时间很短，但仿
  • SpringMVC设置全局异常处理器 水岸齐天 javaspring
    文章目录背景分析使用@ControllerAdvice（@RestControllerAdvice）+@ExceptionHandler实现全局异常全局异常处理-多个处理器匹配顺序存在一个类中存在不同的类中对于过滤器和拦截器中的异常，有两种思路可以考虑背景在项目中我们有需求做一个全局异常处理，来规范所有出去的异常信息。参考：官方文档分析首先ControllerAdvice(RestControll
  • 没有如释重负 君远近
    虽然只有短短的一个多月的努力复习时间，但今天的整个考试经过，还是发现了效果的，题目做的比较自如，没有慌里慌张，而且提前五分钟完成。至于考试成绩，没有实足的把握，60分都不敢保证。但绝对相信自己，比去年肯定要好！今天早早的赶到考场，见到了刘老师，谈起来学习情况，坦率的说，真的是自己不够重视。总以为会很难，没有信心。其实不是的，只要认真对待，树立足够的信心，绝对可以通过考试的。还向老师询问了，后续再报
  • Django之Debug篇 菜鸟之编程 Djangodjangopython后端
    一、DebugToolBar基本使用1.1、概述Django框架的调试工具栏使用django-debug-toolbar库，是一组可配置的面板，显示有关当前请求/响应的各种调试信息，点击时，显示有关面板内容的更多详细信息。官方文档：DjangoDebugToolbar—DjangoDebugToolbar4.3.0documentation1.2、安装pipinstalldjango-debug-
  • C++学习笔记（lambda函数） __TAT__ C&C++c++学习笔记
    C++learningnote1、lambda函数的语法2、lambda函数的几种用法1、lambda函数的语法lambda函数的一般语法如下：[capture_clause](parameters)->return_type{function_body}capture_clause：需要捕获的变量，但要求该变量必须在这个作用域中。通常的捕获方式有以下几种：[]：不捕获任何变量[&]：按引用捕获变
  • 什么事都独自去扛的人，容易抑郁，以及单身 蘑菇心理
    文|实用菌01心情不好的时候，你会怎么办？我的习惯是，找个没有人打扰的角落发呆，或者睡上一觉。生活中，这样处理自己情绪问题的人，还有很多。他们安静，平和，不吵不闹，看起来很佛系，甚至还被称赞你脾气好，内心成熟，但事实，这种外在的好是以一些隐蔽的“坏”为代价的。遇到问题习惯独自去承受的人，表面看起来很坚强，但有一个弱点：在日常生活中，他们的情绪经常会莫名地低落，没来由地不高兴，而且一旦陷入这种情绪当
  • 心赏（2018.10.8） 六一节_3928
    1.上班第一天，同事彤休完产假，回来上班，给我带了酸奶和水果。她生小孩时，我给她发了一个小红包贺喜，哪知她就记在心里了。心赏这个有心的90后。2.女儿放学回来，说自己当了小组长。一边说不想当，一边得意的样子。心赏老师给了孩子这个锻炼的机会。3.老妈今天做了"蚂蚁上树"的菜，得到女儿的高度肯定。心赏老妈还在不断学习。
  • 2022-2-13晨间日记 越亮也打烊
    今天是什么日子起床：7:00就寝：12:08天气：晴心情：糟糕纪念日：无任务清单昨日完成的任务，最重要的三件事：寒假作业，网课，画画改进：作业时间剪短习惯养成：网课不逃～周目标·完成进度数学卷子100％学习·信息·阅读《傅雷家书》《钢铁是怎样炼成的》健康·饮食·锻炼我终于不喝饮料啦，喝茶～人际·家人·朋友邝姐姐带我吃火锅工作·思考啥时候开学，我还有几天赶完作业最美好的三件事1.卷子写完了2.我有冰
  • 中原焦点团队38期王芳芳坚持分享第236天，20230630总约练134次，来访113次，咨8次，观察员13次 芳芳王
    学习焦点的初心是想拯救孩子，孩子由于沉迷游戏，成绩下滑，在学习的过程中发现是自己的教育方式出了状况。经过半年的学习，一些焦点的基本技巧，如接纳、欣赏、倾听、同理心、尊重等都有了一定的了解。但在实际应用时仍然存在很多问题，感觉自己仍然没有放下对孩子成绩的期望，仍然把握不住对孩子管理的度。我该如何去陪伴好孩子？多用心去听课，并加强反思，多约练。去思考如何让自己快乐起来？
  • 子非鱼，焉知鱼之乐 零启若
    在如今网络爆飞信息发达的时代，我们会在各种论坛以及平台看到不计其数的评论，有一些人在评论的时候总是以高尚的道德为标准和底线去衡量，评判，甚至谩骂他人。并且觉得自己充满正义感，义正辞严。这些人姑且不说有没有考虑到别人的感受，更没有感同身受的体验，只是凭借着言论自由，甚至是一种猥琐和变相的心理发泄。就像人和动物一样，人类总是以高等动物自居，高高在上，并且认为人类吃食各种动物都是理所当然，动物就是给人吃
  • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Pythonpythonchromedrivers
    ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
  • 大创项目推荐 深度学习 opencv python 公式识别(图像识别 机器视觉) laafeer python
    文章目录0前言1课题说明2效果展示3具体实现4关键代码实现5算法综合效果6最后0前言优质竞赛项目系列，今天要分享的是基于深度学习的数学公式识别算法实现该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！学长这里给一个题目综合评分(每项满分5分)难度系数：3分工作量：4分创新点：4分更多资料,项目分享：https://gitee.com/dancheng-senior/postgraduate1课题
  • #D174-读书会作业-《财务自由之路》3 白洲笔记
    最近沉迷于写作营，一直就没时间去弄读书会的作业，书的第二遍也就看了个开头，趁着日更的时间，赶紧把作业做了，这次是15到21课。【1.印象最深刻的部分】(本周所读内容中印象最深刻的部分)*活在未来，最正确的方法是什么？用正确的方法做正确的事情，判断什么是正确的？逻辑。学会思考。"作对事情"永远比“把事情作对“重要的多。”长远思考，耐心验证，小心总结提炼“证明自己正确并不是学习的任务和目标，时刻成长，
  • docker基础（一） 运维搬运工 容器-dockerdocker容器运维
    相关概念介绍Docker是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖到一个可移植的容器中，然后发布到任何流行的linux机器上，也可以实现虚拟化，容器是完全使用沙箱机制，互相之间不会有任何接口。Docker有几个重要概念：dockerfile，配置文件，用来生成dockerimagedockerimage，交付部署的最小单元docker命令与API，定义命令与接口，支持第三方系统集
  • Flutter运行flutter doctor 命令长时间未响应如何解决 咕噜签名分发-淼淼 flutter
    Hello大家好！我是咕噜铁蛋！在移动应用开发领域，Flutter以其高效、跨平台的特性吸引了众多开发者的关注。然而，在使用Flutter进行项目开发时，开发者可能会遇到各种问题，其中之一就是运行flutterdoctor命令时长时间未响应。今天铁蛋将深入探讨这一问题的成因、解决方案以及相关的Flutter环境配置知识。一、Flutter与flutterdoctor命令简介Flutter是Goog
  • 倒贴服传奇在什么平台下载 2024最火的倒贴服传奇平台排行榜 诸葛村夫一游戏频道
    2024游戏盒子网站排行榜大全随着数位科技的发展，2024年手游市场持续火爆，各种新开手游持续涌现。本文为广大手游爱好者带来巅峰推荐，总结五个最具实力的手游新服发布网站，为您提供最全面的游戏资讯以及专业的游戏攻略。▶2024最火的倒贴服传奇平台排行榜TOP1：游戏豹官网特点：内部特权游戏类型：多类型推荐日活跃人数：15万网址链接：www.ystt88.cn游戏介绍：游戏豹官网以快速获取新开手游的特
  • 账务处理又出错？资深会计来教你，学会效率翻倍！共同学习 小橘子要努力吖
    作为一名会计，在实际工作中会遇到各种麻烦的账务处理问题。那么，最常用的会计处理方法都有哪些呢？今天小编为大家带来了从业二十六年的资深老会计分享的十四中会计常用的账务处理问题的解决方案，快来看看吧！一、促销品的账务处理在促销时公司经常会把一些商品按进价赠送给消费者使用二、款已付清但发票未到的账务处理三、购买材料发生不合理损耗的账务处理问题公司在购买材料时，常常会发生一些不合理的损耗，那么这种问题该怎
  • 【真诚子】通晓鬼谷第七篇读书日记。 真诚子l通晓鬼谷
    今天把个人品牌，从193读到208页，书的内容质量出奇的高，尤其是这一段。对标学习法，找一个比自己强，或者你期望成为的人进行模仿性学习，对标学习，不是到处，去找人对标兵学习很多人的优点，或是学习自己认为好的方面，而是找准一个对标高手，然后全方位的学习这个人。我在做品牌咨询时就对标，学习了一个在国内很有名的行业顶尖大咖。我先找到他公司的方案，进行完全模仿，连PPT的排版都一样，而且我只参照他一个人的
  • ES-LTR粗排模块 poins jenkins运维
    ES-LTR粗排模块官方资源：https://github.com/HeiBoWang/elasticsearch-learning-to-rankElasticsearch学习排名插件使用机器学习提高搜索相关性排名。它为维基媒体基金会和Snagajob等地方的搜索提供了动力！这个插件有什么功能此插件：允许您在Elasticsearch中存储特征（Elasticsearch查询模板）记录特征得分（
  • 2018-11-18成长小组学习笔记 实验中学45
    因为嗓子“罢工”，我面对众人只能借“微笑”代言。在开始授课前，绣霞老师先反馈上次作业的情况，提到“接纳”需是真正发自内心的完全接纳，而不是口头上的接纳，内心却是排斥的。提到一个“问题”孩子恰恰对家爱的更加“深沉”，夫妻间的问题不能影响到孩子，对孩子更好的爱不是你为他做的更多，而是给他自由、健康成长的空间。图片发自App一、孩子：家庭的一面镜子夫妻成了彼此的“投射”，婚姻便“吵的不可开交”，婚姻便成
  • redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSourceexpire/delincr/lpush数据库分区redis
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷）   1、关于JedisPool.returnSource(Jedis jeids)   这个方法是从red
  • SQL性能优化-持续更新中。。。。。。 atongyeye oraclesql
    1 通过ROWID访问表--索引 你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
         如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
  • lvs- real 男人50 LVS
    #!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #.  /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
  • 生成公钥和私钥 oloz DSA安全加密
    package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
  • UIView 中加入的cocos2d，背景透明 374016526 cocos2dglClearColor
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
  • mysql常用命令 香水浓 mysql
    连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
  • 我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScriptjquerycsshtml5
    系统层面： 高可用性 所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
  • 利用ant进行远程tomcat部署 aijuans tomcat
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
  • 获取复利总收入 baalwolf 获取
           public static void main(String args[]){         int money=200;         int year=1;         double rate=0.1; &
  • eclipse.ini解释 BigBird2012 eclipse
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
  • AngularJS实现分页功能 bijian1013 JavaScriptAngularJS分页
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。   &nbs
  • [Maven学习笔记三]Maven archetype bit1129 ArcheType
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等.   mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式，   mvn archetype   1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
  • 【Java命令三】jps bit1129 Java命令
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看   [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
  • ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
  • unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学unity教程unity视频unity资料unity
    unity 3d还是cocos2dx哪个适合游戏？ 问：unity 3d还是cocos2dx哪个适合游戏？ 答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java算法面试百度招聘
    import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
  • 获取checkbox复选框的值 chiangfai checkbox
    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
  • MySQLdb用户指南 chenchao051 mysqldb
    原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
  • HIVE 窗口及分析函数 daizj hive窗口函数分析函数
    窗口函数应用场景： （1）用于分区排序 （2）动态Group By （3）Top N （4）累计计算 （5）层次查询 一、分析函数 用于等级、百分点、n分片等。 函数             说明 RANK()     &nbs
  • PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHPzip
    PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
  • 精彩英语贺词 dcj3sjt126com 英语
    I'm always here              我会一直在这里支持你                &nb
  • 基于Java注解的Spring的IoC功能 e200702084 javaspringbeanIOCOffice
                                      
  • java模拟post请求 geeksun java
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。 此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
  • Swift语法之 ---- ?和!区别 hongtoushizi ?swift!
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html   Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
  • centos7安装jdk1.7 jisonami jdkcentos
    安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量 在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
  • 数据源架构模式之数据映射器 home198979 PHP架构数据映射器datamapper
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。   一、概念 数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
  • 在Python中使用MYSQL pda158 mysqlpython
    缘由 　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 数据库中。 　　了解到 Python在这方面有优势，便选用之。 　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 记录一下，大家共勉。 　　 python中mysql的调用 　　 百度之后能够通过MySQLdb进行数据库操作。
  • 单例模式 hxl1988_0311 java单例设计模式单件
    package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
  • 27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他