右滑返回上一页案例
在苹果手机上有一种操作叫做右滑返回上一页，一些不错的应用都有类似的操作，随着苹果手机越来越多，这种操作开始普遍，在安卓手机上也开始使用。实现这种右滑返回上一页的操作。
Cupertino UI
其实早都知道Flutter有两套UI模板，一套是material,另一套就是Cupertino。Cupertino主要针对的的就是IOS系统的UI，所以用的右滑返回上一级就是在这个Cupertino里。
Cupertino的引入方法
直接使用import引入就可以了，代码如下:
import 'package:flutter/cupertino.dart';
引入了cupertino的包之后，就可以使用皮肤和交互效果的特性了。要用的右滑返回上一页也是皮肤的交互特性，直接使用就可以了。
CupertinoPageScaffold
这个和以前使用material的Scaffold类似，不过他里边的参数是child，例如下面的代码.
return CupertinoPageScaffold(
child: Center(
child: Container(
height: 100.0,
width:100.0,
color: CupertinoColors.activeBlue,
child: CupertinoButton(
child: Icon(CupertinoIcons.add),
onPressed: (){
Navigator.of(context).push(
CupertinoPageRoute(builder: (BuildContext context){
return RightBackDemo();
})
);
},
),
),
),
);
在Cupertino下也有很多Widget控件，他们都是以Cupertino开头的，这就让我们很好区分，当然两种皮肤是可以进行混用的。
整个案例代码
这个案例就两个主要文件，main.dart 和 right_back_demo.dart 代码如下:
main.dart文件代码
import 'package:flutter/material.dart';
import 'right_back_demo.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme:ThemeData(primarySwatch: Colors.blue),
home: RightBackDemo(),
);
}
}
right_back_demo。dart文件
import 'package:flutter/cupertino.dart';
class RightBackDemo extends StatelessWidget {
const RightBackDemo({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return CupertinoPageScaffold( // 脚手架控件 和material的scaffold不同 没有body部分
child: Center( // 直接使用子元素 子控件
child: Container( // 盒子容器
height: 100.0,
width: 100.0,
color: CupertinoColors.activeBlue,
child: CupertinoButton( // 按钮 添加按钮
child: Icon(CupertinoIcons.add),
onPressed: () { // 点击 触发事件
Navigator.of(context).push( // 路由 打开子页面 路由跳转，打开一个新的页面
// 实现右滑返回上一层的关键就是使用CupertinoPageRoute 控件
CupertinoPageRoute(builder: ((context) {
return RightBackDemo(); // 返回 还是打开这个控件，就是控件打开控件，无限循环
}))
);
},
),
),
)
);
}
}
其实只要使用CupertinoPageRoute打开的子页面，就可以实现右滑返回上一级。希望小伙伴们有所收获。那有新的小案例，小伙伴们也可以留言分享哦！
ToolTip控件实例
轻提示的效果在应用中是少不了的，其实Flutter已经准备好了轻提示控件，这就是toolTip。
轻量级操作提示
其实Flutter中有很多提示控件,比如Dialog、Snackbar和BottomSheet这些操作都是比较重量级的，存在屏幕上的时间较长。根据需求的不同，要有多种选择，所以有轻量级操作提示Tooltip
Tooltip是继承于StatefulWidget的一个Widget，它并不需要调出方法，当用户长按被Tooltip包裹的Widget时，会自动弹出相应的操作提示。
main.dart文件
这节课就用最简单代码给大家做一个轻量级提示案例出来。入口文件代码如下：
import 'package:flutter/material.dart';
import 'tool_tips_demo.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primaryColor: Colors.blue),
home: ToolTipDemo(),
);
}
}
tool_tips_demo.dart文件
这个文件主要的用途就是承载轻提示控件，代码如下：
import 'package:flutter/material.dart';
class ToolTipDemo extends StatelessWidget {
const ToolTipDemo({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Tool tips demo')),
body: Center(
child: Tooltip( // 轻量级控件 里面包裹一个控件，包裹什么，就长按什么，就会出现轻量级提示
message: '易烊千玺 送你一朵小红花', // 小提示 长按之后出现的提示
child: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091408%2Fdnb0nt4ge0tdnb0nt4ge0t.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666516445&t=2a734397b2d3e9126bbaae27ff025715"),
),
),
);
}
}
效果如下：
Draggable控件实例
Flutter提供了强大的拖拽控件，可以灵活定制，接下来就是拖拽小案例。
算是一个Flutter进阶，是入门和实战的一个桥梁，相信小伙伴们一定是有所收获的。
Draggable Widget
Draggable控件负责就是拖拽，父层使用了Draggable，它的子元素就是可以拖动的，子元素可以是容器，可以是图片。用起来非常的灵活。
参数说明：
data: 是要传递的参数，在DragTarget里，会接受到这个参数。当然要在拖拽控件推拽到DragTarget的时候。
child:在这里放置你要推拽的元素，可以是容器，也可以是图片和文字。
feedback: 常用于设置推拽元素时的样子，在案例中当推拽的时候，我们把它的颜色透明度变成了50%。当然你还可以改变它的大小。
onDraggableCanceled:是当松开时的相应事件，经常用来改变推拽时到达的位置，改变时用setState来进行。
代码:
Draggable( // 可拖拽 控件
// data 就是要传递到下面 接收器 传递给接收器的数据 要传递什么都要写在data参数里
data: widget.widgetColor,
child: Container(
width: 100.0,
height: 100.0,
color: widget.widgetColor,
),
// feedback 可拖动控件 拖动控件拖动时子控件的样子
feedback: Container( // 还要传一个 container 不能变
width: 110, // 重新定一下容器 重新定义大小
height: 110,
color: widget.widgetColor.withOpacity(0.5),
),
// 不拖拽 松手时，里面调用一个匿名函数 也可以简写 velocity offset
onDraggableCanceled: (Velocity velocity, Offset offset) {
// 拖拽完成后，改变位置
setState(() {
this.offset = offset; // offset 重新赋值下
});
},
),
DragTarget Widget
DragTarget是用来接收拖拽事件的控件，当把Draggable放到DragTarget里时，他会接收Draggable传递过来的值，然后用生成器改变组件状态。
onAccept:当拖拽到控件里时触发，经常在这里得到传递过来的值。
builder: 构造器，里边进行修改child值。
DragTarget(
// 相当于触发事件 接收color
onAccept: (Color color){
_draggablecolor = color; // 改变color 变成 传递的color
},
// 第二个参数 构造器 改变真实的样子 重新返回 container
builder: (context, candidateData, rejectedData) {
return Container( // 接收器也是Container
width: 200, // 重新定义接收器容器
height: 200,
color: _draggablecolor,
);
},
),
实例代码DEMO
main.dart 文件：
import 'package:flutter/material.dart';
import 'draggable_demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primaryColor: Colors.blue),
home: DraggableDemo(),
);
}
}
draggable_demo.dart 文件
import 'package:flutter/material.dart';
import 'draggable_widget.dart'; // 引入自定义控件 文件
// 继承动态控件
class DraggableDemo extends StatefulWidget {
const DraggableDemo({Key? key}) : super(key: key);
State<DraggableDemo> createState() => _DraggableDemoState();
}
class _DraggableDemoState extends State<DraggableDemo> {
// 最后要把 color赋给接收容器里面 所以重新定义 定义用 late 内部使用 所以加 下划线
late Color _draggablecolor = Colors.grey; // 先给它一个默认颜色 然后再赋值其他颜色
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
// 可层叠 控件
children: [
DraggableWidget( // 自定义控件 默认两个参数
offset: Offset(80.0,80.0),
widgetColor: Colors.tealAccent
),
DraggableWidget(
offset: Offset(180.0,80.0), // 并排 X轴 距离左边的距离 Y轴 距离上边的距离
widgetColor: Colors.redAccent,
),
// 第三个 放在中间 就是拖拽接收器
Center(
child: DragTarget(
// 相当于触发事件 接收color
onAccept: (Color color){
_draggablecolor = color; // 改变color 变成 传递的color
},
// 第二个参数 构造器 改变真实的样子 重新返回 container
builder: (context, candidateData, rejectedData) {
return Container( // 接收器也是Container
width: 200, // 重新定义接收器容器
height: 200,
color: _draggablecolor,
);
},
),
)
],
),
);
}
}
draggable_widget.dart 文件
import 'package:flutter/material.dart';
class DraggableWidget<double> extends StatefulWidget {
// final 是变量 const 是常量
// 先声明两个变量 位置 颜色
final Offset offset;
final Color widgetColor;
// 要接受两个参数 ， 接收参数就是重写构造方法 // 调用父类的方法，因为它无名无参
const DraggableWidget({Key? key,required this.offset,required this.widgetColor}) : super(key: key);
State<DraggableWidget> createState() => _DraggableWidgetState();
}
class _DraggableWidgetState extends State<DraggableWidget> {
// 声明 位置 0.0 左上角
Offset offset = Offset(0.0, 0.0);
// 初始值
void initState() {
// TODO: implement initState
super.initState();
offset = widget.offset; // 取控件传递过来的位置
}
Widget build(BuildContext context) {
return Positioned( // 位置颜色不同， 就直接用positioned 控件 直接定义位置
left: offset.dx, // left 就是距离左边的边距 offset 就是初始化的 传过来的X轴值
top: offset.dy,
child: Draggable( // 可拖拽 控件
// data 就是要传递到下面 接收器 传递给接收器的数据 要传递什么都要写在data参数里
data: widget.widgetColor,
child: Container(
width: 100.0,
height: 100.0,
color: widget.widgetColor,
),
// feedback 可拖动控件 拖动控件拖动时子控件的样子
feedback: Container( // 还要传一个 container 不能变
width: 110, // 重新定一下容器 重新定义大小
height: 110,
color: widget.widgetColor.withOpacity(0.5),
),
// 不拖拽 松手时，里面调用一个匿名函数 也可以简写 velocity offset
onDraggableCanceled: (Velocity velocity, Offset offset) {
// 拖拽完成后，改变位置
setState(() {
this.offset = offset; // offset 重新赋值下
});
},
),
);
}
}
效果如图：
这样就完成了拖拽小案例，希望小伙伴们有更多小案例一起留言分享哦！
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
