Question

我正在尝试在flutter应用程序中运行flare动画，但由于某种原因它没有显示。我没有掉毛/运行时错误，所以我一直无法找出问题所在。我是错误地实现了此动画，还是在“容器”中使用“扩展”放置了问题？

const serviceList = document.querySelectorAll('.service__block');

serviceList.forEach(service => {
  service.addEventListener('click', () => {
    markSelectedService(service);
    moveService(checkDistance(service));
  });
});

//Adds the class to the clicked service
function markSelectedService(service) {
  removeSelectedClass();
  service.classList.add('selected');
}

//Removes the selected class from all the services
function removeSelectedClass() {
  serviceList.forEach(service => {
    service.classList.remove('selected');
  });
}

//Check distance from center
function checkDistance(service) {
  let distance = service.dataset.order - 4;
  return distance;
}

//Move the service 1 by 1 n times
function moveService(distance) {
  if (distance > 0) {
    for (var i = 0; i < distance; i++) {
      serviceList.forEach(service => {
        service.dataset.order = parseInt(service.dataset.order) - 1;
        if (parseInt(service.dataset.order) === -1) {
          service.dataset.order = 11;
        }
      });
    }
  } else if (distance < 0) {
    distance = distance * -1;
    for (var i = 0; i < distance; i++) {
      serviceList.forEach(service => {
        service.dataset.order = parseInt(service.dataset.order) + 1;
        if (parseInt(service.dataset.order) === 12) {
          service.dataset.order = 0;
        }
      });
    }
  }
}

Answer 1

我认为没有必要用Column包装Container，然后再用Column包装。

尝试一下：

Padding(
  padding: const EdgeInsets.all(10.0),
  child: Column(
    children: <Widget>[
      Expanded(
        child: FlareActor(
          "assets/animations/finding-pizza.flr",
          alignment: Alignment.center,
          fit: BoxFit.contain,
          animation: _animationName,
        ),
      ),
      SizedBox(
        height: MediaQuery.of(context).size.height / 35,
      ),
      Text(
        "Got a question?",
        style: Theme.of(context)
            .textTheme
            .title
            .copyWith(fontSize: 0.1 * deviceWidth),
        textAlign: TextAlign.center,
        softWrap: true,
      ),
    ],
  ),
)

实施了眩光动画，现在在运行应用程序时动画和文本均不显示

1 个答案: