锦鲤跃龙
锦鲤跃龙

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)

  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • 网易严选官方旗舰店，优质商品，卓越服务 高省_飞智666600
    网易严选官方旗舰店是网易旗下的一家电商平台，以提供优质商品和卓越服务而闻名。作为一名SEO优化师，我将为您详细介绍网易严选官方旗舰店，并重点强调其特点和优势。大家好！我是高省APP最大团队&联合创始人飞智导师。相较于其他返利app，高省APP的佣金更高，模式更好，最重要的是，终端用户不会流失！高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几
  • Pyecharts数据可视化大屏：打造沉浸式数据分析体验 我的运维人生 信息可视化数据分析数据挖掘运维开发技术共享
    Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
  • 怎么起诉借钱不还的人？怎样起诉欠款不还的人？ 影子爱学习
    怎么起诉借钱不还的人？怎样起诉欠款不还的人？如果遇到难以解决的法律问题，我们可以匹配专业律师。例如：婚姻家庭（离婚纠纷）、刑事辩护、合同纠纷、债权债务、房产（继承）纠纷、交通事故、劳动争议、人身损害、公司相关法律事务（法律顾问）等咨询推荐手机/微信:15633770876【全国案件皆可】借钱不还起诉对方需要哪些资料起诉欠钱不还的，一般需要的材料包括以下这些：借据、收据、欠条、付款凭证等证据，以及向
  • 2019-12-22-22:30 涓涓1016
    今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
  • 将cmd中命令输出保存为txt文本文件 落难Coder Windowscmdwindow
    最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
  • PHP环境搭建详细教程 好看资源平台 前端php
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 直返最高等级与直返APP：无需邀请码的返利新体验 古楼
    随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • GitHub上克隆项目 bigbig猩猩 github
    从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • 【目标检测数据集】卡车数据集1073张VOC+YOLO格式 熬夜写代码的平头哥∰ 目标检测YOLO人工智能
    数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：1073标注数量(xml文件个数)：1073标注数量(txt文件个数)：1073标注类别数：1标注类别名称:["truck"]每个类别标注的框数：truck框数=1120总框数：1120使用标注工具：labelImg标注
  • 人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
    随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
  • 走向以教育叙事为载体的教育叙事研究 666小飞鱼
    今天我读了吴松超老师的《给教师的68条建写作建议》中的第23条《如何通过教育叙事走向研究》，吴老师在文中与我们分享了一个德育案例，这是一个反面的案例，意在告知我们在处理问题时，不能就考虑的点太窄，思考要全面。走向教育叙事研究，教师要有敏锐的“感知力”，这个感知力来自于背后专业知识的支撑，思维能力以及广阔的视野和见识等。所以对于同一件事处理方法不同，这个就是教师背后“敏锐力”的不同造成的，也就是说是
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 钢筋长度超限检测检数据集VOC+YOLO格式215张1类别 futureflsl 数据集YOLO深度学习机器学习
    数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：215标注数量(xml文件个数)：215标注数量(txt文件个数)：215标注类别数：1标注类别名称:["iron"]每个类别标注的框数：iron框数=215总框数：215使用标注工具：labelImg标注规则：对类别进
  • CX8836：小体积大功率升降压方案推荐（附Demo设计指南） 诚芯微科技 社交电子
    CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升
  • 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其他