flutter学习笔记

1、flutter的开始

1、认识文件夹

在这里插入图片描述
文件夹名称 作用
android android平台相关代码
ios ios平台相关代码
lib flutter相关代码，主要编写的代码放入该文件夹
test 用于存放测试代码
pubspec.yaml 配置文件，项目相关信息，一般存放第三方库的依赖

2、入口文件/入口方法

入口文件：flutter项目的lib目录里面都有一个main.dart这个文件就是flutter的入口文件

入口方法：main.dart文件中的

void main() {
  runApp(MyApp());
}
//也可也简写一下
void main()=>runApp(MyApp());

其中main方法是dart的入口方法。runApp方法是flutter的入口方法。MyApp是自定义的一个组件。

2、flutter基本

从最根本的开始哦。

1、Helloworld

import 'package:flutter/material.dart';

void main() {
  runApp( Center(
    child: Text(
      'CDX',
      textDirection: TextDirection.ltr,
    )
  ));
}

实现效果：

在这里插入图片描述

2、自定义组件

在flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget。

StatelessWidget：是无状态组件，状态不可变的widget。

StatefulWidget：是有状态组件，持有的状态可能在widget生命周期改变。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
      'CDX111',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow,
      ),
    ));
  }
}

实现效果：

在这里插入图片描述

3、组件：MaterialApp/Scaffold

1、MaterialApp组件是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层widget使用。

2、Scaffold组件是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

代码块：

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


class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
      'CDX111',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow,
      ),
    ));
  } 
}

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
      'CDX111',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow,
      ),
    ));
  } 
}

实现效果：

在这里插入图片描述

4、组件：Container/Text 详解

1、Container组件

该组件可以被用来看作是我们之前的一个div，其实他就是一个对象，我们来看一下他的构造函数吧。

在这里插入图片描述

Container组件属性描述

属性名 类型 说明
key Key Container 一标识符，用于查找更新
alignment AlignmentGeometry 控制child 的对齐方式，如果Container或者 Container 父节点尺寸大于child 的尺寸，这个属性设置会起作用，有很多种对齐方式
padding EdgelnsetsGeometry Decoration内部的空白区域，如果有child的话，child 位于padding 内部
color Color 用来设置 Contain 背景色，如果foregroundDecoration设置的话，可能会遮盖color效果
decoration Decoration 绘制在child后面的装饰，设置了 Decoration 话，就不能设置color 属性，否则会报错，此时应该在 Decoration中进行颜色的设置
foregroundDecoration Decoration 绘制在child前面的装饰
width double Container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局
height double Container的高度，设置为double.infinity可以强制在高度上撑满
constraints BoxConstraints 添加到child上额外的约束条件
margin EdgelnsetsGeometry 围绕在Decoration和child之外的空白区域，不属于内容区域
transform Matrix4 设置Container的变换矩阵，类型为Matrix4
child Widget Container中的内容Widget

2、Text组件

Text组件属性描述

属性名 类型 默认值 说明
data String 数据为要显示的文本
maxLines int 0 文本显示的最大行数
style TextStyle null 文本样式，可定义文本的字体大小、颜色、粗细等
textAlign TextAlign TextAlign.center 文本水平方向对齐方式，取值有center、end、justify、left、right、start、values
textDirection TextDirection TextDirection.ltr 文本书写方向。ltr从左到右，rtl从右到左
textScaleFactor double 1.0 字体缩放系数
textSpan TextSpan null 文本块

3、示例

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
          textAlign: TextAlign.center,
          overflow: TextOverflow.fade,
          style: TextStyle(
              fontSize: 16.0,
              color: Colors.red,
              fontWeight: FontWeight.w700,
              fontStyle: FontStyle.italic,
              decoration: TextDecoration.lineThrough,
              decorationColor: Colors.white,
              decorationStyle: TextDecorationStyle.dashed),
        ),
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
            color: Colors.green,
            border: Border.all(color: Colors.blue, width: 2.0),
            borderRadius: BorderRadius.all(Radius.circular(150))
            ),
            transform: Matrix4.rotationZ(0.3),
      ),
    );
  }
}

效果：

在这里插入图片描述

5、图片组件

基础代码块：（本节代码基础部分，其余效果展示代码均在HomeContent中）

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

1、介绍

1、new Image：从ImageProvideer 获取图片

2、new Image.asset：加载资源图片

3、new Image.file：加载本地图片文件

4、new Image.netWork：加载网络图片

5、new Image.memory：加载Uint8List资源图片。

Image组件属性描述

属性名 类型 说明
image ImageProvider 抽象类，需要自己实现获取图片数据的操作
width/hei ght double Image显示区域的宽度和高度设置
fit Boxfit 图片填充模式
color Color 图片颜色
colorBlendMode BlendMode 在对图片进行手动处理的时候，可能会用到图片混合如改变图片的颜色。此属性可以对颜色进行混合处理。
alignment Alignment 控制图片的摆放位置
repeat ImageRepeat 设置图片重复模式
centerSlice Rect 当图片需要被拉伸时使用
matchTextDirection booI 该属性与Directionlity配合使用
gaplessPlayback bool 当ImageProvide发生变化后，重新加载图片的过程中，原图片的展示是否保留

BoxFit取值描述

取值 描述
Boxfit.fill 全图显示，显示可能拉伸，充满
Boxfit.contain 全图显示，显示原比例，不需充满
Boxfit. cover 显示可能拉伸，可能裁剪，充满
BoxFit.fitWidth 显示可能拉伸，可能裁剪，宽度充满
BoxFit.fitHeight 显示可能拉伸，可能裁剪，高度充满
Boxfit.none 原始大小
BoxFit.scaleDown 效果和BoxFit.contain差不多，但是此属性不允许显示超过源图片大小，即可小不可大

2、远程图片示例

mage.network(src)

简单示例：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1675144683,641372710&fm=26&gp=0.jpg",
        colorBlendMode: BlendMode.screen,
        fit: BoxFit.cover,),
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.green,
        ),
      ),
    );
  }
}

效果：

在这里插入图片描述

3、实现圆角以及圆形图片

1、使用borderRadius和BoxFit.cover实现

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.circular(150),//*********
        image: DecorationImage(
          image: NetworkImage(      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1675144683,641372710&fm=26&gp=0.jpg",
          ),
          fit: BoxFit.cover,//************
        ),
      ),
    ));
  }
}

效果：

在这里插入图片描述

2、使用ClipOval实现

1、首先看clipOval处理的效果

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
          child: ClipOval(
            child: Image.network("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1675144683,641372710&fm=26&gp=0.jpg",),
          ),
    ));
  }
}

效果：

在这里插入图片描述

2、继续变圆

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
          child: ClipOval(
            child: Image.network("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1675144683,641372710&fm=26&gp=0.jpg",
            height: 300,
            width: 300,
            fit: BoxFit.cover,),
          ),
    ));
  }
}

效果：

在这里插入图片描述

2、本地图片

1、相关文件夹的创建与配置文件修改

在这里插入图片描述

2、示例

1、代码

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
          child: Image.asset("images/1.jpg"),
    ));
  }
}

2、效果

在这里插入图片描述

6、列表组件

基础代码块：（本节代码基础部分，其余效果展示代码均在HomeContent中）

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

1、介绍

列表大致有以下分类

1、水平的列表

2、垂直的列表

3、数据量非常大的列表

4、矩阵式的列表

ListView组件的基本属性

属性名 类型 默认值 说明
scrollDirection Axis Axis.vertical 列表的排列方向，Axis.vertical为垂直方法式默认值，Axis.horizontal为水平方法
padding EdgelnsetsGeometry 列表内部的空白区域，如果有child的话，child位于padding内部
reverse bool false 组件排列反向
children List 列表元素，注意List元素全部为Widget

2、垂直列表

代码：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Image.asset("images/1.jpg"),
          title: Text("xxxxxxxxxxxxxxxxxxxxx"),
          subtitle: Text("ccccccccccccccccccc"),
        ),
        ListTile(
          title: Text("xxxxxxxxxxxxxxxxxxxxx"),
          subtitle: Text("ccccccccccccccccccc"),
          trailing: Icon(Icons.search),
        ),
        ListTile(
          leading: Icon(Icons.padding),
          title: Text("xxxxxxxxxxxxxxxxxxxxx"),
          subtitle: Text("ccccccccccccccccccc"),
        ),
        ListTile(
          leading: Icon(Icons.games),
          title: Text("xxxxxxxxxxxxxxxxxxxxx"),
          subtitle: Text("ccccccccccccccccccc"),
        ),
        ListTile(
          leading: Icon(Icons.ac_unit_sharp),
          title: Text("xxxxxxxxxxxxxxxxxxxxx"),
          subtitle: Text("ccccccccccccccccccc"),
        ),
        ListTile(
          leading: Icon(Icons.tab),
          title: Text("xxxxxxxxxxxxxxxxxxxxx"),
          subtitle: Text("ccccccccccccccccccc"),
        ),
      ],
    );
  }
}

效果：

在这里插入图片描述

3、水平列表

代码：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child:ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.grey,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.deepOrange,
        ),
      ],
    )
    );
  }
}

效果：

在这里插入图片描述

4、动态列表

代码：

class HomeContent extends StatelessWidget {
  List<Widget> getData() {
    List<Widget> list = new List();
    for (var i = 1; i <= 7; i++) {
      list.add(ListTile(
        title: Text("xxxxxx$i个"),
      ));
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return Container(child: ListView(children: this.getData()));
  }
}

ListView.builder

class HomeContent extends StatelessWidget {
  List list = new List();
  HomeContent() {

    for (var i = 1; i <= 7; i++) {
      list.add("xxxxxx$i个");
    }
  }
  @override
  Widget build(BuildContext context) {
    return Container(child: ListView.builder(
      itemCount: this.list.length,
      itemBuilder: (context,index){
        return ListTile(
          title: Text(this.list[index]),
        );
      },
    ));
  }
}

效果：

在这里插入图片描述

7、GridView组件

基础代码块：（本节代码基础部分，其余效果展示代码均在Demo中）

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: Demo(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

GridView组件属性及描述

属性名 类型 默认值 说明
scrollDirection Axis Axis.vertical 滚动的方向，有垂直和水平两种，默认为垂直方向
reverse bool false 默认是从上或者左向下或者向右滚动的，这个属性控制是否反向，默认值为false，即不反向滚动
controller ScrollController 控制child滚动时候的位置
primary bool 是否是与父节点的PrimaryScrollcontroller所关联的主滚动视图
physics ScrollPhysics 滚动的视图如何响应用户的输入
shrinkWrap bool false 滚动方向的滚动视图内容是否应该由正在查看的内容所决定
padding EdgeinsetsGeometry 四周的空白区域
gridDelegate SliverGridDelegate 控制GridView中子节点布局的delegate
cacheExtent double 缓存区域

1、通过GridView.count实现网格布局

代码：

class Demo extends StatelessWidget {
  List<Widget> getData() {
    List<Widget> list = new List();
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        child: Text(
          'xxxxx $i xxxx',
          style: TextStyle(color: Colors.white,fontSize: 20),
        ),
        color: Colors.blue,
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing: 10.0, //水平子Widget之间的距离
      mainAxisSpacing: 10.0, //垂直widget之间距离
      padding: EdgeInsets.all(10),
      crossAxisCount: 3, //控制一行有多少个Widget
      childAspectRatio: 0.7,//宽度和高度的比例
      children: this.getData(),
    );
  }
}

效果：

在这里插入图片描述

2、通过GridView.builder实现网格布局

代码：

class Demo extends StatelessWidget {
  Widget getData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.asset("images/1.jpg"),
          SizedBox(height: 12),
          Text(
            "xxxxxxxx",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          )
        ],
      ),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue, width: 1),
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      // padding: EdgeInsets.all(10),
      // crossAxisCount: 3, //控制一行有多少个Widget
      // childAspectRatio: 0.7,//宽度和高度的比例
      // children: this.getData(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, //水平子Widget之间的距离
        mainAxisSpacing: 10.0, //垂直widget之间距离
        crossAxisCount: 3, //控制一行有多少个Widget
      ),
      itemCount: 10,
      itemBuilder: this.getData,
    );
  }
}

效果：

在这里插入图片描述

8、页面布局 Padding/Row/Column/Expanded

基础代码块：（本节代码基础部分，其余效果展示代码均在Demo中）

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: Demo(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

GridView组件属性及描述

1、Padding组件

在html中常见的布局标签都有padding属性，但是Fliuuter中很多widget是没有padding属性的。这时候我们可以用Padding组件处理容器与子元素之间的间距

属性 说明
padding padding值，EdgeInsetss设置填充的值
child 子组件

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      crossAxisCount: 3, //控制一行有多少个Widget
      childAspectRatio: 1.7,//宽度和高度的比例
      children: <Widget>[
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
         Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
         Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
         Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
         Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
         Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
         Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
         Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.asset("images/1.jpg",fit: BoxFit.cover,),
        ),
      ],
    );
  }
}

效果：

在这里插入图片描述

2、Row水平布局组件

属性介绍：

属性 说明
mainAxisAlignment 主轴的排序方式
crossAxisAlignment 次轴的排序方式
children 组件子元素

3、Column垂直布局组件

实现一个图标组件：实现传入图标（颜色和大小动态）

代码：

class IconDemo extends StatelessWidget {
  double size = 32.0;
  Color color = Colors.red;
  IconData icon;
  IconDemo(this.icon, {this.color, this.size});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(
          Icons.home,
          size: 32,
          color: Colors.white,
        ),
      ),
    );
  }
}

通过上述组件测试Row的排序

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 600.0,
      width: 600.0,
      child:Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.start,

      children: <Widget>[
        IconDemo(
          Icons.home,
          color: Colors.green,
        ),
        IconDemo(
          Icons.search,
          color: Colors.red,
        ),
        IconDemo(
          Icons.fit_screen,
          color: Colors.green,
        ),
      ],
    )
    );
  }
}

class IconDemo extends StatelessWidget {
  double size = 32.0;
  Color color = Colors.red;
  IconData icon;
  IconDemo(this.icon, {this.color, this.size});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(
          Icons.home,
          size: 32,
          color: Colors.white,
        ),
      ),
    );
  }
}

效果：

在这里插入图片描述

4、Expanded组件

Flutter中Expanded组件类似Web中的Flex布局

Expanded可以用在Row和Column布局中

属性 说明
flex 元素占整个父Row/Column的比例
child 子元素

代码：（未包含上述IconDemo组件的代码）

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: IconDemo(
            Icons.home,
            color: Colors.green,
          ),
        ),
        Expanded(
          flex: 2,
          child: IconDemo(
            Icons.search,
            color: Colors.red,
          ),
        ),
      ],
    );
  }
}

效果：

在这里插入图片描述

5、相关案例

实现一个类似于下图的布局

在这里插入图片描述

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: Container(
                height: 200,
                color: Colors.blue,
                child: Text("xxxxxxxxxx"),
              ),
            )
          ],
        ),
        SizedBox(height: 10),
        Row(children: <Widget>[
          Expanded(
              flex: 2,
              child: Container(
                  height: 180,
                  child: Image.asset(
                    "images/1.jpg",
                    fit: BoxFit.cover,
                  ))),
          Expanded(
              flex: 1,
              child: Container(
                  height: 180,
                  child: ListView(children: <Widget>[
                    Container(
                        height: 85,
                        child: Image.asset(
                          "images/1.jpg",
                          fit: BoxFit.cover,
                        )),
                    SizedBox(height: 10),
                    Container(
                        height: 85,
                        child: Image.asset(
                          "images/1.jpg",
                          fit: BoxFit.cover,
                        ))
                  ]))),
        ]),
      ],
    );
  }
}

效果：

在这里插入图片描述

9、页面布局 Stack层叠组件/Stack与Aligin/Stack与Positioned

基础代码块：（本节代码基础部分，其余效果展示代码均在Demo中）

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: Demo(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

1、Stack组件

属性 说明
alignment 配置所有子元素的显示位置
children 子组件

stack效果：有点像元素重叠一样，下面展示文字和容器效果

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          height: 400,
          width: 300,
          color: Colors.red,
        ),
        Text("xxxxxxxxxxx")
      ],
    );
  }
}

效果：

在这里插入图片描述

通过alignment属性进行位置移动

在这里插入图片描述

还可以是坐标

alignment: Alignment(0,0),

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      // alignment: Alignment.center,
      // alignment: Alignment(0,0),
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          height: 400,
          width: 300,
          color: Colors.red,
        ),
        Text("xxxxxxxxxxx")
      ],
    );
  }
}

效果：

在这里插入图片描述

2、align/positiond

上述stack如果里面有两个文本的话，就会导致两个文本出现重叠的现象如下：

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      // alignment: Alignment.center,
      // alignment: Alignment(0,0),
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          height: 400,
          width: 300,
          color: Colors.red,
        ),
        Text("xxxxxxxxxxx"),
        Text("ddddddddddd"),
      ],
    );
  }
}

效果：

在这里插入图片描述
使用align

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 400,
        color: Colors.blue,
        child: Stack(children: <Widget>[
          Align(
            alignment: Alignment.topLeft,
            child:  Icon(Icons.help, size: 40, color: Colors.white),
          ),
          Align(
            alignment: Alignment.center,
            child: Icon(Icons.search, size: 40, color: Colors.white),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Icon(Icons.home_filled, size: 40, color: Colors.white),
          ), 
        ]),
      ),
    );
  }
}

效果：

在这里插入图片描述
使用positiond
属性 说明
top 子元素距离顶部的距离
bottom 子元素距离底部的距离
left 子元素距离左侧的距离
right 子元素距离右侧的距离
child 子组件

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 400,
        color: Colors.blue,
        child: Stack(children: <Widget>[
          Positioned(
            left: 10,
            child:  Icon(Icons.help, size: 40, color: Colors.white),
          ),
          Positioned(
            bottom: 0,
            child: Icon(Icons.search, size: 40, color: Colors.white),
          ),
          Positioned(
            right: 0,
            child: Icon(Icons.home_filled, size: 40, color: Colors.white),
          ), 
        ]),
      ),
    );
  }
}

效果：

在这里插入图片描述

10、AspectRatio组件/Card组件

基础代码块：（本节代码基础部分，其余效果展示代码均在Demo中）

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: Demo(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

1、AspectRatio

AspectRatio的作用是根据设置调整子元素child的宽高比。

AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的宽度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比率

属性 说明
aspectRatio 宽高比，最终可能不会根据这个值去布局，具体要看综合因素，外层是否允许按照这种比例进行布局，这只是一个参考值
child 子组件

代码：（长是高的2倍例子）

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      child: AspectRatio(
        aspectRatio: 2.0/1.0,//外层的200，会是里面的container长200高100
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

2、Card

Card是卡片组件块，内容可以由大多数类型的Widget构成，Card具有圆角和阴影，这让它看起来有立体感。

属性 说明
margin 外边距
child 子组件
Shape Card的阴影效果，默认的阴影效果为圆角的长方形边。

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          margin:EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title:Text('chidaoxian'),
                subtitle: Text('前端开发工程师'),
              ),
               ListTile(
                title:Text('电话：12323432141234123'),

              ),
               ListTile(
                title:Text('地址：xxxxxx'),

              ),
            ],
          ),
        ),
        Card(
          margin:EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title:Text('chidaoxian'),
                subtitle: Text('前端开发工程师'),
              ),
               ListTile(
                title:Text('电话：12323432141234123'),

              ),
               ListTile(
                title:Text('地址：xxxxxx'),

              ),
            ],
          ),
        ),
      ],
    );
  }
}

效果：

在这里插入图片描述

11、Wrap组件

基础代码块：（本节代码基础部分，其余效果展示代码均在Demo中）

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: Demo(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

1、介绍

wrap组件可以实现流布局，单行的Wrap跟Column表现几乎一致，单列的Wrap则跟Row表现几乎一致。但Row与Column都是单行单列，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上去扩展显示。

属性 说明
direction 主轴的方法，默认水平
alignment 主轴的对齐方式
spacing 主轴方向上的间距
textDirection 文本方向
verticalDirection 定义了children摆放顺序，默认是down，见flex相关属性介绍
runAlignment run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行
runSpacing run的间距

2、wrap实例

代码：

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing:10,
      // runSpacing:5,
      children: <Widget>[
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
      MyButton('xxx'),
    ]);
  }
}
class MyButton extends StatelessWidget {
  final String text;
  const MyButton(this.text, {Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
    );
  }
}

效果：

在这里插入图片描述

12、StatefulWidget有状态组件、页面上绑定数据、改变页面数据

基础代码块：（本节代码基础部分，其余效果展示代码均在Demo中）

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: Demo(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

1、介绍

StatefulWidget是有状态组件，持有的状态可能在Widget生命周期改变。通俗的讲：如果我们想改变页面中的数据的话这个时候就需要用到StatefulWidget。

2、有状态组件/数据绑定

代码：

class Demo extends StatefulWidget {
  Demo({Key key}) : super(key: key);

  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  int countNum = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 20,),
        Chip(label: Text('${this.countNum}')),
        SizedBox(height: 20,),
        RaisedButton(
          child: Text('按钮'),
          onPressed: (){
            setState(() {
              this.countNum++;
            });
          },
        )
      ],
    );
  }
}

效果：

在这里插入图片描述

13、ButtonNavigationBar组件

1、介绍

ButtonNavigationBar 是底部导航条，可以让我们定义底部Tab切换，buttonNavigationBar是Scaffold组件参数。

属性名 类型 说明
currentlndex int 当前索引，用来切换按钮控制
fixedColor Color 选中按钮的颜色。如果没有指定值，则用系统主题色
iconSize double 按钮图标大小
items List 底部导航调按钮集。每一项是一个BottomNavigationBarItem，有icon图标及title文本属性
onTap ValueChanged 按下其中某一个按钮回调事件。需要根据返回的索引设置当前索引

2、实例

1、效果：

底部导航切换页面效果：

在这里插入图片描述
在这里插入图片描述

代码介绍：

在这里插入图片描述
在这里插入图片描述

代码：

1、main.dart的代码

import 'package:flutter/material.dart';
import 'package:flutter_app01/pages/tabs/Home.dart';
import 'pages/tabs/Tabs.dart';
import 'pages/tabs/ddd.dart';
import 'pages/tabs/Setting.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int currentIndex = 0;

  List pageList = [
    HomePage(),
    SettingPage(),
    DDDPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: this.pageList[this.currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this.currentIndex,
          onTap: (int index) {
            setState(() {
              this.currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '首页',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.my_library_books),
              label: '我的',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings_applications),
              label: '设置',
            ),
          ],
        ),
      ),
    );
  }
}

2、Tabs.dart的代码

import 'package:flutter/material.dart';

class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('flutter cdx'),
        ),
        body: Text('xxx'),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this.currentIndex,
          onTap: (int index) {
            setState(() {
              this.currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '首页',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.my_library_books),
              label: '我的',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings_applications),
              label: '设置',
            ),
          ],
        ),
      ),
    );
  }
}

3、Home.dart的代码（Home.dart/Setting.dart代码类似）

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Text('HomePage'),
    );
  }
}

14、Flutter中的基本路由

flutter中的路由通俗的讲就是页面跳转。在flutter中通过Navigator组件管理路由导航。并提供了管理堆栈的方法。如：Navigator.push 和Navigator.pop

flutter中给我们提供了两种配置路由跳转的方式：1、基本路由 2、命名路由

1、简单路由跳转

在这里插入图片描述

代码：

import 'package:flutter/material.dart';
import '../Search.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          child: Text('跳转搜索页面'),
          onPressed: (){
            Navigator.of(context).push(
             MaterialPageRoute(
               builder: (context)=> SearchPage()
             )
            );
          },
        ),
      ],
    );
  }
}

2、跳转传值

在这里插入图片描述

代码：

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  SearchPage({Key key}) : super(key: key);

  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  String title ;
  _SearchPageState({this.title = 'cdx'});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("${this.title}页面"),
      ),
      body: Text("内容区域"),
    );
  }
}

3、返回

在这里插入图片描述

代码：

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  SearchPage({Key key}) : super(key: key);

  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  String title ;
  _SearchPageState({this.title = 'cdx'});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text('返回'),
        onPressed: (){
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text("${this.title}页面"),
      ),
      body: Text("内容区域"),
    );
  }
}

效果：

在这里插入图片描述

15、Flutter命名路由

1、不携带参数

main.dart文件配置：**

在这里插入图片描述

路由跳转方式：

在这里插入图片描述

2、携带参数

Routes.dart文件

import 'package:flutter/material.dart';
import 'package:flutter_app01/pages/tabs/Tabs.dart';
import 'package:flutter_app01/pages/tabs/ddd.dart';
import 'package:flutter_app01/pages/tabs/Setting.dart';
import 'package:flutter_app01/pages/Search.dart';
import 'package:flutter_app01/pages/tabs/Home.dart';

final routes = {
  '/': (context, {arguments}) => Tabs(),
  '/home': (context, {arguments}) => HomePage(),
  '/ddd': (context, {arguments}) => DDDPage(),
  '/setting': (context, {arguments}) => SettingPage(),
  '/search': (context, {arguments}) => SearchPage(arguments: arguments),
};

//主要方法
var onGenerateRoute = (RouteSettings settings) {
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route =   MaterialPageRoute(builder: (context) =>  pageContentBuilder(context, argumens: settings.arguments));
      return route;
    } else {
      final Route route =  MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

main.dart文件

import 'package:flutter/material.dart';
import 'package:flutter_app01/routes/Routes.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      // home: Tabs(),
      initialRoute: '/', //初始化的时候加载的路由
      onGenerateRoute: onGenerateRoute,

    );
  }
}

16、路由替换/返回根路由

1、替换路由

就是替换当前的页面。

在这里插入图片描述

2、返回跟路由

在这里插入图片描述

待入的组件表格属性介绍

Form组件

属性名 类型 说明
key Key 组件在整个Widget树中的key值
autovalidate bool 是否自动提交表单
child Widget 组件child只能有一个子组件
onChanged VoidCallback 当FormFiled值改变时的回调函数

TextFromField组件

属性名 类型 说明
autovalidate bool 自动验证值
initialValue T 表单字段初始值
onSaved FormFieldSetter 当Form表单调用保存方法Save时回调函数
validator FormFieldValidator Form表单验证器

Material Design风格组件

组件名称 中文名称 简单说明
AppBar 应用按钮组件 应用的工具按钮
AlertDialog 对话框组件 有操作按钮的对话框
BottomNavigationBar 底部导航条组件 底部导航条，可以很容易地在tap之间切换和浏览顶级视图
Card 卡片组件 带有边框阴影的卡片组件
Drawer 抽屉组件 Drawer抽屉组件可以实现类似抽屉拉开关闭的效果
FloatingActionButton 浮动按钮组件 应用的主要功能操作按钮
FlatButton 扁平按钮组件 扁平化风格的按钮
MaterialApp Material应用组件 Material App代表使用纸墨设计风格的应用
PopupMenuButton 弹出菜单组件 弹出菜单按钮
Scaffold 脚手架组件 实现了基本的Material Design 布局
SnackBar 轻量提示组件 一个轻量级消息提示组件，在屏幕的底部显示
SimpleDialog 简单对话框组件 简单对话框组件，只起提示作用，没有交互
TabBar 水平选项卡及视图组件 一个显示水平选项卡的Material Design组件
TextField 文本框组件 可接受应用输入文本的组件

MaterialApp

属性名 类型 说明
title String 应用程序的标题。该标题出现在如下位置：Android：任务管理器的程序快照之上 IOS：程序切换管理器
theme ThemeData 定义应用所使用的主题颜色。可以指定一个主题中每个控件的颜色
color Color 应用的主要颜色值，即 primary color
home Widget 这个是一个Widget对象，用来定义当前应用打开时，所显示的界面
routes Map<String,WidgetBuider> 定义应用中页面跳转规则
initialRoute String 初始化路由
onGenerateRoute RouteFactory 路由回调函数。当通过Navigator.of(context).pushNamed跳转路由时，在routes查找不到时，会调用该方法
onLocaleChanged 当系统修改语言的时候，会触发这个回调
navigatorObservers List 导航观察器
debugShowMaterialGrid bool 是否显示纸墨设计基础布局网格，用来调试UI的工具
showPerformanceOverlay bool 显示性能标签

Scaffold

属性名 类型 说明
appBar AppBar 显示在界面顶部的一个AppBar
body Widget 当前界面所显示的主要内容
floatingActionButton Widget 在Material Design中定义的一个功能按钮
persistentFooterButtons List 在固定在下方显示的按钮
drawer Widget 侧边栏组件
bottomNavigationBar Widget 显示在底部的导航栏按钮栏
backgroundColor Color 背景颜色
resizeToAvoidBottomPadding bool 控制界面内容body是否重新布局来避免底部被覆盖，比如当键盘显示时，重新布局避免被键盘盖住内容。默认值为true

AppBar及SliverAppBar组件

属性名 类型 默认值
leading Widget null
title Widget null
actions List null
bottom PreferredSize Widget null
elevation double 4
flexibleSpace Widget null
backgroundColor Color ThemeData.primaryColor
brightness Brightness ThemeData.primaryColorBrightness
iconTheme IconThemeData ThemeData.primaryIconTheme
textTheme TextTheme ThemeData.primaryTextTheme
centerTitle bool true

介绍：

属性名 说明
leading 在标题前面显示的一个组件，在首页通常显示应用的logo；在其他界面通常显示
title Toolbar中主要内容，通常显示为当前界面的标题文字
actions 一个Widget列表，代表Toolbar中所显示的菜单，对于通常的菜单，通常使用IconButton来表示，对于不太常用的菜单通常使用PopupMenuButton来显示为三点，点击后弹出二级菜单
bottom 通常是TabBar。用来在Toolbar标题下面显示一个Tab导航栏
elevation 纸墨设计中组件的z坐标顺序，对于可滚动的SliverAppBar，当SliverAppBar和内容同级的时候，该值为0，当内容咕哝的那个SliverAppBar变为ToolBar的时候，修改elevation
flexibleSpace 一个显示在AppBar下方的组件，高度和AppBar高度一样，可以实现一些特殊的效果，该属性通常在SliverAppBar中使用
backgroundColor 背景色
brightness AppBar的亮度，有白色和黑色两种主题
iconTheme AppBar上图标的颜色、透明度和尺寸信息。默认值为ThemeData. primaryIcon Theme
textTheme AppBar上的文字样式
centerTitle 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,723评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,485评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,998评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,323评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,355评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,079评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,389评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,019评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,519评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,738评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,293评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2赞 345

推荐阅读更多精彩内容