dart Lottie在扩展时没有居中

wvmv3b1j  于 2023-11-14  发布在  其他
关注(0)|答案(2)|浏览(81)

我需要一个Lottie适合整个屏幕,所以我设置Lottie的高度和宽度为double.infinity。但是Lottie从左上角扩展而不是从中心,使得Lottie的中心稍微移动到右下方向,无论对齐方式如何。还尝试了CenterAlign的 Package

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset(
          'splash_logo.json',
          alignment: Alignment.center,
          repeat: true,
          height: double.infinity,
          fit: BoxFit.cover,
          width: double.infinity,
        ),
      ),
    );
  }

字符串
如何扩大它保持中心的洛蒂在屏幕的中心

fhg3lkii

fhg3lkii1#

您可以使用StackPositioned.fill()来扩展Lottie动画,使其中心保持在屏幕的中心。此外,为了确保适当的可伸缩性,使用FittedBox Package 动画。类似于:

Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: FittedBox(
              fit: BoxFit.cover,
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: Lottie.asset(
                  'assets/splash_logo.json',
                  repeat: true,
                  alignment: Alignment.center,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

字符串

nlejzf6q

nlejzf6q2#

您可以尝试将Lottie动画 Package 在Container中,并将Container的高度和宽度设置为double.infinity。这将允许Container填充整个屏幕,并且动画将在此Container内居中。
举例说明;

Widget build(BuildContext context) {
 return Scaffold(
   body: Container(
     height: double.infinity,
     width: double.infinity,
     child: Center(
       child: Lottie.asset(
         'splash_logo.json',
         alignment: Alignment.center,
         repeat: true,
         height: double.infinity,
         fit: BoxFit.cover,
         width: double.infinity,
       ),
     ),
   ),
 );
}

字符串
另一种方法是使用OverflowBox小部件允许其子部件溢出父部件的框,这有助于解决对齐问题。

Widget build(BuildContext context) {
 return Scaffold(
   body: OverflowBox(
     minHeight: 0.0,
     minWidth: 0.0,
     maxHeight: double.infinity,
     maxWidth: double.infinity,
     child: Center(
       child: Lottie.asset(
         'splash_logo.json',
         alignment: Alignment.center,
         repeat: true,
         height: double.infinity,
         fit: BoxFit.cover,
         width: double.infinity,
       ),
     ),
   ),
 );
}

相关问题