数日前、PinterestのアプリにUiを選択してFlutterでアプリの構築を練習することにしましたが、水平方向のドラッグで「もっと」と「削除」ボタンを表示するスライダーにこだわっています。 右側の写真 。
私はジェスチャーをアニメーションと組み合わせて使用して、このようなものをひらひらさせるほどの知識を持っていません。だからこそ、あなたの誰かが私のような皆のために、ListView.builderでこのようなものを実装する方法を理解できる例を作ってくれることを願っています。
MacOSメールアプリのgifの例:
このようなレイアウトを行うためのパッケージを作成しました: flutter_slidable (ベースのアイデアを提供してくれたRémiRousseletに感謝します)
このパッケージを使用すると、リストアイテムのコンテキストアクションを簡単に作成できます。たとえば、説明した種類のアニメーションを作成する場合:
このコードを使用します。
new Slidable(
delegate: new SlidableDrawerDelegate(),
actionExtentRatio: 0.25,
child: new Container(
color: Colors.white,
child: new ListTile(
leading: new CircleAvatar(
backgroundColor: Colors.indigoAccent,
child: new Text('$3'),
foregroundColor: Colors.white,
),
title: new Text('Tile n°$3'),
subtitle: new Text('SlidableDrawerDelegate'),
),
),
actions: <Widget>[
new IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () => _showSnackBar('Archive'),
),
new IconSlideAction(
caption: 'Share',
color: Colors.Indigo,
icon: Icons.share,
onTap: () => _showSnackBar('Share'),
),
],
secondaryActions: <Widget>[
new IconSlideAction(
caption: 'More',
color: Colors.black45,
icon: Icons.more_horiz,
onTap: () => _showSnackBar('More'),
),
new IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () => _showSnackBar('Delete'),
),
],
);
この種のジェスチャー用のウィジェットはすでにあります。 Dismissible
と呼ばれます。
こちらで見つけることができます。 https://docs.flutter.io/flutter/widgets/Dismissible-class.html
[〜#〜] edit [〜#〜]
まったく同じ移行が必要な場合は、おそらく自分で実装する必要があります。基本的な例を作成しました。アニメーションを少し調整したいかもしれませんが、少なくとも機能しています。
class Test extends StatefulWidget {
@override
_TestState createState() => new _TestState();
}
class _TestState extends State<Test> {
double rating = 3.5;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new ListView(
children: ListTile
.divideTiles(
context: context,
tiles: new List.generate(42, (index) {
return new SlideMenu(
child: new ListTile(
title: new Container(child: new Text("Drag me")),
),
menuItems: <Widget>[
new Container(
child: new IconButton(
icon: new Icon(Icons.delete),
),
),
new Container(
child: new IconButton(
icon: new Icon(Icons.info),
),
),
],
);
}),
)
.toList(),
),
);
}
}
class SlideMenu extends StatefulWidget {
final Widget child;
final List<Widget> menuItems;
SlideMenu({this.child, this.menuItems});
@override
_SlideMenuState createState() => new _SlideMenuState();
}
class _SlideMenuState extends State<SlideMenu> with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
initState() {
super.initState();
_controller = new AnimationController(vsync: this, duration: const Duration(milliseconds: 200));
}
@override
dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final animation = new Tween(
begin: const Offset(0.0, 0.0),
end: const Offset(-0.2, 0.0)
).animate(new CurveTween(curve: Curves.decelerate).animate(_controller));
return new GestureDetector(
onHorizontalDragUpdate: (data) {
// we can access context.size here
setState(() {
_controller.value -= data.primaryDelta / context.size.width;
});
},
onHorizontalDragEnd: (data) {
if (data.primaryVelocity > 2500)
_controller.animateTo(.0); //close menu on fast swipe in the right direction
else if (_controller.value >= .5 || data.primaryVelocity < -2500) // fully open if dragged a lot to left or on fast swipe to left
_controller.animateTo(1.0);
else // close if none of above
_controller.animateTo(.0);
},
child: new Stack(
children: <Widget>[
new SlideTransition(position: animation, child: widget.child),
new Positioned.fill(
child: new LayoutBuilder(
builder: (context, constraint) {
return new AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return new Stack(
children: <Widget>[
new Positioned(
right: .0,
top: .0,
bottom: .0,
width: constraint.maxWidth * animation.value.dx * -1,
child: new Container(
color: Colors.black26,
child: new Row(
children: widget.menuItems.map((child) {
return new Expanded(
child: child,
);
}).toList(),
),
),
),
],
);
},
);
},
),
)
],
),
);
}
}
[〜#〜] edit [〜#〜]
FlutterはAnimation<FractionalOffset>
in SlideTransition
animation
プロパティ。この投稿によると https://groups.google.com/forum/#!topic/flutter-dev/fmr-C9xK5t4 はAlignmentTween
に置き換える必要がありますが、これも同様です仕事。代わりに、この問題によると: https://github.com/flutter/flutter/issues/13812 代わりに生のTween
に置き換えて、直接Offset
を作成します代わりにオブジェクトが機能します。残念ながら、コードはあまり明確ではありません。