Flutter :按钮后面的底部表单动画

mspsb9vt  于 2022-12-05  发布在  Flutter
关注(0)|答案(1)|浏览(122)

在屏幕的底部是一个按钮。当按钮被按下时,一个底部的薄片应该在按钮后面向上滑动。
我没能把动画做好。我试着用堆栈。
在下面的抖动代码中,底部的表单没有从屏幕的底部向上滑动,而是从按钮的上方向上滑动。我该如何修复它?

import 'package:flutter/material.dart';

class BottomSheetExample extends StatefulWidget {
  const BottomSheetExample({super.key});

  @override
  State<BottomSheetExample> createState() => _BottomSheetExampleState();
}

class _BottomSheetExampleState extends State<BottomSheetExample> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.green,
      bottomSheet: MyBottomSheet(),
      body: Center(child: Text('Body')),
    );
  }
}

class MyBottomSheet extends StatefulWidget {
  const MyBottomSheet({super.key});

  @override
  MyBottomSheetState createState() => MyBottomSheetState();
}

class MyBottomSheetState extends State<MyBottomSheet> {
  double _size = 100;
  bool _large = false;

  void _updateSize() {
    setState(() {
      _large = !_large;
      _size = _large ? 200 : 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return BottomSheet(
      onClosing: () {},
      builder: (BuildContext context) => Stack(
        children: [
          AnimatedSize(
            curve: Curves.elasticOut,
            duration: const Duration(milliseconds: 2000),
            child: Container(
              color: Colors.amber,
              height: _size,
              padding: const EdgeInsets.all(20),
              child: const Center(child: Text('Bottom Sheet')),
            ),
          ),
          Positioned(
            bottom: 10,
            child: ElevatedButton(
              onPressed: () => _updateSize(),
              child: const Text("Toggle"),
            ),
          ),
        ],
      ),
    );
  }
}
cidc1ykv

cidc1ykv1#

请试试这个。它很容易搞乱堆栈。我在这里使用AnimatedContainer是为了简单起见,但通常你也可以使用AnimatedSize没有问题。如果你有任何问题,请随时问!

class MyWidget extends StatefulWidget {
  const MyWidget({
    Key? key,
  }) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var _isExpanded;
  @override
  void initState() {
    super.initState();
    _isExpanded = false;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.bottomStart,
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.purple,
              ),
            ),
          ],
        ),
        Stack(
          alignment: AlignmentDirectional.bottomCenter,
          children: [
            AnimatedContainer(
              height: _isExpanded ? 100 : 0,
              color: Colors.blue,
              duration: const Duration(milliseconds: 500),
            ),
            TextButton(
                onPressed: () {
                  setState(() {
                    _isExpanded = !_isExpanded;
                  });
                },
                style: TextButton.styleFrom(
                  backgroundColor: Colors.pink,
                ),
                child: const Text('Press me!')),
          ],
        ),
      ],
    );
  }
}

相关问题