This commit is contained in:
yifeng.yl
2019-01-08 20:39:13 +08:00
parent 383819e280
commit 2e9702ec7b
242 changed files with 13523 additions and 654 deletions

View File

@ -0,0 +1,79 @@
/*
* @Author: 一凨
* @Date: 2018-12-15 20:39:14
* @Last Modified by: 一凨
* @Last Modified time: 2018-12-15 21:27:39
*/
import 'package:flutter/material.dart';
class ScrollPhysicsDemo extends StatefulWidget {
_ScrollPhysicsDemoState createState() => _ScrollPhysicsDemoState();
}
class _ScrollPhysicsDemoState extends State<ScrollPhysicsDemo> {
final PageController _pageController = new PageController();
double _currentPage = 0.0;
@override
Widget build(BuildContext context) {
return Container(
height: 300.0,
width: MediaQuery.of(context).size.width,
child: LayoutBuilder(
builder: (context, constraints) => NotificationListener(
onNotification: (ScrollNotification note) {
setState(() {
_currentPage = _pageController.page;
});
},
child: PageView.custom(
physics: const PageScrollPhysics(
parent: const BouncingScrollPhysics()),
controller: _pageController,
childrenDelegate: SliverChildBuilderDelegate(
(context, index) => _SimplePage(
'$index',
parallaxOffset:
constraints.maxWidth / 2.0 * (index - _currentPage),
// 小字 Text 在页面滑动时要比整体移动速度快一倍,所以小字的 translate X 为 \tt{pageWidth / 2 * progress} 。
),
childCount: 10,
),
),
),
),
);
}
}
class _SimplePage extends StatelessWidget {
_SimplePage(this.data, {Key key, this.parallaxOffset = 0.0})
: super(key: key);
final String data;
final double parallaxOffset;
@override
Widget build(BuildContext context) => new Center(
child: Container(
color: Theme.of(context).primaryColor,
child: new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Text(
data,
style: const TextStyle(fontSize: 60.0,color: Colors.white),
),
new SizedBox(height: 40.0),
new Transform(
transform:
new Matrix4.translationValues(parallaxOffset, 0.0, 0.0),
child: const Text('左右滑动,这是第二行滚动速度更快的小字',style: const TextStyle(fontSize: 16.0,color: Colors.white),),
),
],
),
),
),
);
}

View File

@ -0,0 +1,44 @@
/*
* @Author: 一凨
* @Date: 2018-12-15 20:39:18
* @Last Modified by: 一凨
* @Last Modified time: 2018-12-15 21:26:11
*/
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import '../../../../common/widget_demo.dart';
import './demo.dart';
const String content0 = '''
### **简介**
> 确定滚动组件的物理属性
- 例如确定当用户达到最大滚动范围或者停止滚动时Scrollable的一些滚动行为
- 当启动物理 [Simulation](https://docs.flutter.io/flutter/physics/Simulation-class.html) 时,当前滚动位置和速度将作为初始条件。
- 使用simulation中的模拟移动来确定widget的滚动位置
''';
const String content1 = '''
### **基本用法**
> 该widget不能赋值给参数类型为Widget的组件
- 下方Demo我们设置PageView的physics属性滑动感受下下方小字自定义的滚动
''';
class Demo extends StatefulWidget {
static const String routeName = '/components/Scroll/ScrollPhysics';
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
contentList: [
content0,
content1,
ScrollPhysicsDemo(),
],
codeUrl: 'components/Scroll/ScrollPhysics/demo.dart',
docUrl: 'https://docs.flutter.io/flutter/widgets/ScrollPhysics-class.html',
title: 'ScrollPhysics',
);
}
}