Trung tâm cá nhân
sách gpt4 ăn đã đi

flutter - 为什么我不能在 Flutter 的 Column 中水平居中 SizeTransition？

In lại 作者：IT王子 更新时间：2023-10-29 07:11:30 27 4
mua khóa gpt4 giày nike

请检查以下代码。无论我尝试了什么，SizeTransition 都没有在列中水平居中。我试图将 Column 包装在 Container 中，然后提供无限宽度。我试图将 SizeTransition 包装在一个中心。我试图将 SizeTransition 包装在具有居中对齐属性的 Container 中。我试图将它包装在一个堆栈中。我试图给容器 child 提供对齐中心属性等......但它们都不起作用......

class MyWidget extends StatelessWidget {
  @ghi đè
  Xây dựng tiện ích (BuildContext context) {
    trả về Giàn giáo(
      appBar: AppBar(),
      body: AnimatedBox(),
    );
  }
}

class AnimatedBox extends StatefulWidget {
  @ghi đè
  createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @ghi đè
  initState không có giá trị() {
    super.initState();
    _controller = AnimationController(
      vsync: cái này,
      duration: Duration(milliseconds: 400),
    );
  }

  @ghi đè
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @ghi đè
  Xây dựng tiện ích (BuildContext context) {
    return Column(
      trẻ em: [
        RaisedButton(
          child: Text('animate forward'),
          onPressed: () {_controller.forward();},
        ),
        RaisedButton(
          child: Text('animate reverse'),
          onPressed: () {_controller.reverse();},
        ),
        const SizedBox(height: 100.0,),
        SizeTransition(
          con: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.blue,
          ),
          sizeFactor: CurvedAnimation(
            curve: Curves.fastOutSlowIn,
            parent: _controller,
          ),
        ),
      ],
    );
  }
}

例如，以下代码不适用于SizeTransition，但适用于ScaleTransition。我不知道 SizeTransition 有什么问题。

return Container(
      width: double.infinity,
      child: Column(

câu trả lời hay nhất

尽管我之前的回答在一定程度上解决了这个问题，但我还想解决 SizeTransition 小部件的局限性以及如何解决这个问题。

SizeTransition 提供“展开”其内容的效果，通过重写对齐设置在水平或垂直轴上运行动画。

为了在不破坏对齐规则的情况下实现相同的效果，同时避免使用 ScaleTransition 小部件，因为我们需要“展开/显示”动画而不是“放大” - 这是我的建议:

@ghi đè
Xây dựng tiện ích (BuildContext context) {
  final _animation = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
  return Column(
    trẻ em: [
      // ...,
      AnimatedBuilder(
        animation: _animation,
        builder: (_, child) => ClipRect(
          child: Align(
            căn chỉnh: Alignment.center,
            heightFactor: _animation.value,
            widthFactor: null,
            child: child,
          ),
        ),
        con: Container(
          width: 200.0,
          height: 200.0,
          color: Colors.blue,
          child: Text("test"),
        ),
      )
    ]
  );
}

这基本上是一个 Người xây dựng hoạt hình 小部件，具有与 SizeTransition 相同的 ClipRect Và Align，除了它确实将对齐限制为仅一个轴。

如果您希望动画在水平轴和垂直轴上运行 - 将相同的 _animation.value 分配给 widthFactor tài sản:

Căn chỉnh(
  căn chỉnh: Alignment.center,
  heightFactor: _animation.value,
  widthFactor: _animation.value,
  child: child,
),

这将帮助您实现“从中心显示”效果，而无需放大和缩小小部件的内容。

关于flutter - 为什么我不能在 Flutter 的 Column 中水平居中 SizeTransition？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56315392/

27 4 0
Đề xuất bài viết: Flutter 嵌套的 GestureDetector 不起作用
Đề xuất bài viết: xác thực mã thông báo Ruby
Đề xuất bài viết: ruby - 检测由 RSpec、Ruby 运行的代码
Đề xuất bài viết: firebase - 我如何检查电子邮件地址是真实的还是虚假的
IT王子
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress