flutter 将容器从屏幕外部移动到屏幕上（具有容器大小）

Question

在这个示例代码中，我想制作具有例如100.0高度大小的容器，并通过动画将其移动到屏幕中，以表明，就像简单的底板一样，这个示例代码可以工作，但它不是我想要的

1. 100.0问题是将其移动到屏幕上，其大小与我们样本上的容器女巫的大小相同

2. 从容器底部高度开始动画进入屏幕

例如：

在此示例代码中，动画将容器移动到屏幕顶部而不是其大小

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page(),
      );
  }
}

class Page extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _PageState();
}

class _PageState extends State<Page> with SingleTickerProviderStateMixin {
  Tween<Offset> tween = Tween<Offset>(
    begin: Offset(0.0, 10000.0),
    end: Offset(0.0, 0.0),
    );
  Animation<Offset> animation;
  AnimationController animationController;

  GlobalKey _widgetKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
      );
    animation = tween.animate(animationController);

    Future<void>.delayed(Duration(seconds: 1), () {
      final Size screenSize = MediaQuery.of(context).size;
      final RenderBox widgetRenderBox =
      _widgetKey.currentContext.findRenderObject();
      final Size widgetSize = widgetRenderBox.size;
      final double offset = (screenSize.height / 2 / widgetSize.height).ceilToDouble();
      tween = Tween<Offset>(
        begin: Offset(0.0, offset),
        end: Offset(0.0, 0.0),
        );
      animation = tween.animate(animationController);
      this.setState((){
        animationController.forward();
      });
    });
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ddddddd'),),
      body: Stack(
        alignment: Alignment.center,
        fit: StackFit.loose,
        children: <Widget>[
          SlideTransition(
              position: animation,
              child: Container(
                key: _widgetKey,
                  height:100.0,
                  width: 300.0,
                  color:Colors.indigo,
                  child:Center(
                    child:Text('ddddddddddddd'),
                    )
                  )
              ),
        ],
        ),
      );
  }
}

Answer 1

我希望我没有误解你的问题。

1. 堆栈应该具有​​整个屏幕的大小。例如用 SizedBox 包裹它。
2. 无需将文本居中。您应该将其在容器本身内部对齐。
3. 容器应该具有屏幕的宽度。
4. 容器的高度不是必需的，因此我们不需要计算它。

这对我有用：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Page(),
    );
  }
}

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

  @override
  State<StatefulWidget> createState() => _PageState();
}

class _PageState extends State<Page> with SingleTickerProviderStateMixin {
  late final AnimationController _animationController =
      AnimationController(vsync: this, duration: const Duration(seconds: 2));
  late final Animation<Offset> _animation =
      Tween<Offset>(begin: const Offset(0, 1), end: const Offset(0, 0))
          .animate(_animationController);

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

  void delayedStart() async {
    await Future.delayed(const Duration(seconds: 2), () {
      _animationController.forward();
    });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ddddddd'),
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          alignment: Alignment.bottomCenter,
          fit: StackFit.loose,
          children: <Widget>[
            SlideTransition(
              position: _animation,
              child: Container(
                alignment: Alignment.center,
                height: 100,
                width: MediaQuery.of(context).size.width,
                color: Colors.indigo,
                child: const Text('ddddddddddddd')
              )
            ),
          ],
        ),
      ),
    );
  }
}