Flutter-ListTile中的FloatingActionButton

时间:2020-10-03 13:21:14

标签: flutter flutter-layout

我需要在所有ListTiles的尾随中放置一个动画的FloatingActionButton(例如下面的波纹管)。

对于动画FloatingActionButton,我按照本教程进行操作,以获取所需的FloatingActionButton的结构。

Animated FloatingActionButton example

enter image description here

问题是:FloatingActionButton溢出。如何解决此问题?使用FloatingActionButton或其他具有相同弹出效果的小部件。

enter image description here

我已经尝试过定位,堆叠,SingleChildScrollView等小部件。

如果我返回SingleChildScrollView,我会得到:

with SingleChildScrollView

ListTile(
...     
   trailing:Stack(children: [AnimatedFAB()], ),
...
),

动画按钮代码为:

import 'package:flutter/material.dart';

class AnimatedFAB extends StatefulWidget {
  @override
  _AnimatedFABState createState() => _AnimatedFABState();
}

class _AnimatedFABState extends State<AnimatedFAB> with SingleTickerProviderStateMixin {

  bool isOpened = false;
  AnimationController _animationController;
  Animation<Color> _buttonColor;
  Animation<double> _animationIcon;
  Animation<double> _translateButton;
  Curve _curve = Curves.easeOut;
  double _fabHeight = 56.0;

  
  @override
  void initState() {
    _animationController = 
        AnimationController(vsync: this, duration: Duration(milliseconds: 500))
          ..addListener(() { 
            setState(() {});
          });
    _animationIcon = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
    _buttonColor = ColorTween(begin: Colors.lightBlue, end: Colors.amber).animate(CurvedAnimation(parent: _animationController,
      curve: Interval(0.00, 1.00, curve: Curves.linear)));

    _translateButton = Tween<double> (begin: _fabHeight, end: -14.0)
        .animate(CurvedAnimation(
        parent: _animationController,
        curve: Interval(0.0, 0.75, curve: _curve)
      )
    );
    super.initState();
  }
  
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  
  //Widgets
  Widget buttonAdd() {
    return Container(
      child: FloatingActionButton(
        onPressed: () {},
        tooltip: "Add",
        child: Icon(Icons.add),
      ),);
  }
  
  Widget buttonEdit() {
    return Container(
      child: FloatingActionButton(
        onPressed: () {},
        tooltip: "Edit",
        child: Icon(Icons.edit),
      ),);
  }
  
  Widget buttonDelete() {
    return Container(
      child: FloatingActionButton(
        onPressed: () {},
        tooltip: "Delete",
        child: Icon(Icons.delete),
      ),);
  }

  Widget buttonToggle() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: _buttonColor.value,
        onPressed: animate,
        tooltip: "Toggle",
        child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _animationIcon,),
      ),);
  }
  
  animate() {
    if (!isOpened)
      _animationController.forward();
     else
      _animationController.reverse();
     isOpened = !isOpened;

  }
  
  @override
  Widget build(BuildContext context) {
    return Positioned(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Transform(
            transform: Matrix4.translationValues(0.0, _translateButton.value*3.0, 0.0),
            child: buttonAdd(),),
          Transform(
            transform: Matrix4.translationValues(0.0, _translateButton.value*2.0, 0.0),
            child: buttonEdit(),),
          Transform(
            transform: Matrix4.translationValues(0.0, _translateButton.value, 0.0),
            child: buttonDelete(),),
          buttonToggle(),
        ],
      ),
    );
  }
}

0 个答案:

没有答案