如何在列内添加网格动画？

Question

我查阅了 rive 文档，它必须在脚手架内，但在我的代码中我有一个列我想在其中放置动画

这是 Rive 团队的示例：

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

void main() {
  runApp(MaterialApp(home: SimpleAnimation()));
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: RiveAnimation.network(
          'https://cdn.rive.app/animations/vehicles.riv',
        ),
      ),
    );
  }
}

要播放资源包中的动画，请使用：

RiveAnimation.asset('assets/truck.riv');

这是我的代码，为您提供有关问题的线索：

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:rive/rive.dart';

import '../../animation_and_home_page_tomato_timer_pomodoro_timer/HomePagePomodoroTimer.dart';


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

  @override
  State<WeSentYouAnEmail> createState() => _WeSentYouAnEmailState();
}

class _WeSentYouAnEmailState extends State<WeSentYouAnEmail> {
  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: TextSelectionTheme(
          data: TextSelectionTheme.of(context).copyWith(
            selectionColor: Color(0xffD7D7D7),
            cursorColor: Color(0xff3B3B3B),
            selectionHandleColor: Color(0xffD7D7D7),
          ),
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(32.0),
              child: Container(
                height: double.maxFinite,
                width: 600,
                decoration: BoxDecoration(
                   color: Color(0xffF6F6F6), // background white  color: Color(0xffF6F6F6),
                  borderRadius: BorderRadius.all(
                    Radius.circular(0.0),
                  ),
                ),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            RichText(
                              text: TextSpan(
                                style: GoogleFonts.questrial(),
                                children: [
                                  WidgetSpan(
                                    child: Icon(FontAwesomeIcons.checkDouble,
                                        size: 40,
                                        color: Color(0xffD7D7D7)),
                                  ),
                                ],
                              ),
                            ),
                            RichText(
                              text: TextSpan(
                                style: GoogleFonts.questrial(),
                                children: [
                                  WidgetSpan(
                                    child: GestureDetector(
                                      onTap: () {
                                        showDialog(
                                            context: context,
                                            barrierColor: Colors.transparent,
                                            builder: (ctx) => HomePagePomodoroTimer());
                                      },
                                      child: Icon(FontAwesomeIcons.squareXmark,
                                        size: 40,
                                        color: Color(0xff3B3B3B),),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              color: Color(0xffF4CFDD),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.fromLTRB(96.0, 30, 96.0, 30),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Column(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: [
                                      Text(
                                        "We send you an Email",
                                        style: TextStyle(
                                          fontSize: 20,
                                          fontStyle: FontStyle.normal,
                                          fontWeight: FontWeight.normal,
                                          color: Color(0xff3B3B3B),
                                        ),
                                      ),
                                    ],
                                  ),
                                  const SizedBox(height: 120,),
                                  const SizedBox(height: 90,),
                                  Divider(color: Color(0xff3B3B3B)),
                                  const SizedBox(height: 15,),
                                  const Center(
                                    child: Text(
                                      "Please, check your Email inbox",
                                      style: TextStyle(
                                        fontSize: 20,
                                        fontStyle: FontStyle.normal,
                                        fontWeight: FontWeight.normal,
                                        color: Color(0xff3B3B3B),
                                      ),
                                    ),
                                  ),
                                  const SizedBox(height: 15,),
                                ],
                              ),
                            ),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              color: Color(0xffF4CFDD),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.fromLTRB(600.0, 30, 600.0, 200.0),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

如何解决这个问题？

预先感谢您，祝您有美好的一天！

Answer 1

提供约束/尺寸，它就会起作用。您可以在顶级小部件上使用

LayoutBuilder

或

MediaQuery

来获取约束，使用 SizedBox 包装您的 rive 小部件并提供高度。如果它不在可滚动小部件内，则 Expanded 是获得可用空间的更好选择。