mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-08-06 09:01:00 +08:00
add file
This commit is contained in:
79
lib/widgets/components/Scroll/ScrollPhysics/demo.dart
Normal file
79
lib/widgets/components/Scroll/ScrollPhysics/demo.dart
Normal 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),),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
44
lib/widgets/components/Scroll/ScrollPhysics/index.dart
Normal file
44
lib/widgets/components/Scroll/ScrollPhysics/index.dart
Normal 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',
|
||||
);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user