dart Flutter :如何根据值选择动画方向

gc0ot86w  于 2023-04-27  发布在  Flutter
关注(0)|答案(2)|浏览(152)

我有一个动画容器:

AnimatedContainer(
                  width: ScreenSize.getScreenWidth(context),
                  height: _selectAll ? 10 : bottomBarHeight,
                  color: _selectAll ? Colors.red : Colors.green,
                  duration: const Duration(seconds: 2),
                  curve: Curves.fastLinearToSlowEaseIn,
                  child: const FlutterLogo(size: 75),
                ),

我希望当_selectAll为true时,容器从底部到顶部出现,当_selectAll为false时,容器从顶部到底部消失。
在这个版本中,容器的行为完全相反(当为false时,从底部到顶部,当为true时,从顶部到底部

whlutmcx

whlutmcx1#

你试过AnimatedAlign小工具吗?
下面是基于您的代码的示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyWidget()));
}

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

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

class _MyWidgetState extends State<MyWidget> {
  bool reverse = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: AnimatedAlign(
        alignment: reverse ? Alignment.bottomCenter : Alignment.topCenter,
        duration: const Duration(seconds: 2),
        curve: Curves.fastLinearToSlowEaseIn,
        child: Container(
            width: double.infinity,
            height: 100,
            color: reverse ? Colors.green : Colors.red,
            child: const FlutterLogo()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            reverse = !reverse;
          });
        },
        child: const Icon(Icons.flip),
      ),
    );
  }
}
wsewodh2

wsewodh22#

ANSWERmainAxisAlignment: MainAxisAlignment.end,将容器 Package 在Column

Column(
        mainAxisAlignment: MainAxisAlignment.end,
      children:[
       AnimatedContainer(
          width: selected ? 300.0 : 300.0,
          height: selected ? 20 : 100.0,
          color: selected ? Colors.red : Colors.green,
          alignment:
              selected ? Alignment.bottomCenter : Alignment.topCenter,
          duration: const Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          child: FlutterLogo(),
        ),
      ]),

相关问题