- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
在这段代码中我们可以轻松地为所有角设置边框半径,例如topLeft
, topRight
, bottomLeft
, bottomRight
以一行代码为例:
borderRadius: borderRadius.evaluate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
现在我如何将它用于分离的角?例如:
borderRadius: BorderRadius.only(
topLeft: borderRadius.evaluate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
topRight: borderRadius.evaluate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
),
完整源代码:
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: HomePage(),
));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
BorderRadiusTween borderRadius;
Duration _duration = Duration(milliseconds: 500);
Tween<Offset> _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));
double _height, min = 0.1, initial = 0.3, max = 1;
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: _duration);
borderRadius = BorderRadiusTween(
begin: BorderRadius.circular(75.0),
end: BorderRadius.circular(0.0),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('DraggableScrollableSheet'),
),
floatingActionButton: GestureDetector(
child: FloatingActionButton(
child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller),
elevation: 5,
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.white,
onPressed: () async {
if (_controller.isDismissed)
_controller.forward();
else if (_controller.isCompleted) _controller.reverse();
},
),
),
body: SizedBox.expand(
child: Stack(
children: <Widget>[
FlutterLogo(size: 500),
SizedBox.expand(
child: SlideTransition(
position: _tween.animate(_controller),
child: DraggableScrollableSheet(
minChildSize: min, // 0.1 times of available height, sheet can't go below this on dragging
maxChildSize: max, // 0.7 times of available height, sheet can't go above this on dragging
initialChildSize: initial, // 0.1 times of available height, sheet start at this size when opened for first time
builder: (BuildContext context, ScrollController controller) {
if (controller.hasClients) {
var dimension = controller.position.viewportDimension;
_height ??= dimension / initial;
if (dimension >= _height * max * 0.9)
_onWidgetDidBuild(() {
_scaffoldKey.currentState.showSnackBar(SnackBar(
content: Text('ON TOP'),
duration: Duration(seconds: 3),
));
});
else if (dimension <= _height * min * 1.1)
_onWidgetDidBuild(() {
_scaffoldKey.currentState.showSnackBar(SnackBar(
content: Text('ON BOTTOM'),
duration: Duration(seconds: 3),
));
});
}
return AnimatedBuilder(
animation: controller,
builder: (context, child) {
return ClipRRect(
borderRadius: borderRadius.evaluate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
child: Container(
color: Colors.blue[800],
child: ListView.builder(
controller: controller,
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
),
);
},
);
},
),
),
),
],
),
),
);
}
_onWidgetDidBuild(Function callback) {
WidgetsBinding.instance.addPostFrameCallback((_) {
callback();
});
}
}
最佳答案
您不需要为它使用Tween
或任何类型的动画。
查看此示例。
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
Duration _duration = Duration(milliseconds: 500);
Tween<Offset> _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));
static double _origRadius = 80;
double _height, min = 0.1, initial = 0.5, max = 1, _radius = _origRadius;
GlobalKey<ScaffoldState> _key = GlobalKey();
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: _duration, value: 1);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
floatingActionButton: GestureDetector(
child: FloatingActionButton(
child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller),
elevation: 5,
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.white,
onPressed: () async {
if (_controller.isDismissed)
_controller.forward();
else if (_controller.isCompleted) _controller.reverse();
},
),
),
body: SizedBox.expand(
child: Stack(
children: <Widget>[
FlutterLogo(size: 500),
SizedBox.expand(
child: SlideTransition(
position: _tween.animate(_controller),
child: DraggableScrollableSheet(
minChildSize: min, // 0.1 times of available height, sheet can't go below this on dragging
maxChildSize: max, // 0.7 times of available height, sheet can't go above this on dragging
initialChildSize: initial, // 0.1 times of available height, sheet start at this size when opened for first time
builder: (BuildContext context, ScrollController controller) {
if (controller.hasClients) {
var dimension = controller.position.viewportDimension;
_height ??= dimension / initial;
// this is used for border radius
double initialTop = (_height * max) - _origRadius;
if (dimension > initialTop) {
if (_radius >= 0) {
_radius = _origRadius - (dimension - initialTop);
}
}
}
return ClipRRect(
borderRadius: BorderRadius.only(topLeft: Radius.circular(_radius), topRight: Radius.circular(_radius)),
child: Container(
height: 500.0,
color: Colors.blue[800],
child: ListView.builder(
controller: controller,
itemCount: 15,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
),
);
},
),
),
),
],
),
),
);
}
}
关于Flutter 使用 BorderRadiusTween 分离 ClipRRect 边界半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57239470/
我想为 ClipRRect 添加阴影在 flutter 中。我希望它看起来像这样: 但是当我尝试构建它时,我得到了这样的东西: 阴影穿过整个框而不是 ClipRRect 区域。这是我的代码: Colu
我知道 ClipRRect 有额外的选项,比如自定义剪辑器。但是如果我只需要一个简单的边界半径,会有什么性能差异吗?哪个比较推荐? 最佳答案 如果您的目标是创建圆形边框,则必须仅在最后一种情况下使用剪
我有一个简单的 ClipRRect小部件如下: @override Widget build(BuildContext context) { return ClipRRect(
我对在 api 15 (Android 4.0.3) 上运行的自定义 View 有疑问 代码: canvas.clipRect(10,10,100,100, Region.Op.DIFFERENCE)
Container 和ClipRRect 都具有borderRadius 属性,但有时Container 无法正常工作。这是例子。 不工作 Container( decoration: BoxDe
在这段代码中我们可以轻松地为所有角设置边框半径,例如topLeft, topRight, bottomLeft, bottomRight 以一行代码为例: borderRadius: borderRa
我是一名优秀的程序员,十分优秀!