顫振SizeTransition導致容器邊界半徑無法正常作業

我正在使用 SizeTransition 為容器的寬度設定影片。這個容器應該有圓角。問題是圓角僅在 sizeTransition 完成時才起作用。如果未完成，它們將保持正方形（如下圖所示）。

我的代碼：

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: const Duration(seconds: 5), vsync: this);
  }

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

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: const BoxConstraints.expand(),
        color: Colors.black,
        child: Center(
          child: Column(
            children: [
              const SizedBox(height: 100),
              Stack(
                alignment: Alignment.centerLeft,
                children: [
                  Container(
                    width: 300,
                    height: 20,
                    decoration: BoxDecoration(
                        color: const Color(0XFFC41D3D).withOpacity(0.5),
                        borderRadius:
                            const BorderRadius.all(Radius.circular(15))),
                  ),
                  SizeTransition(
                    axis: Axis.horizontal,
                    sizeFactor: Tween(begin: 0.0, end: 1.0)
                        .chain(CurveTween(curve: const Interval(0.0, 0.4)))
                        .animate(_controller),
                        /// the container whose border radius is not working as expected
                    child: Container(
                      width: 300,
                      height: 20,
                      decoration: BoxDecoration(
                          color: const Color(0XFFC41D3D),
                          borderRadius: BorderRadius.circular(15.0)),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
onPressed: () {
          _controller.repeat();
        },
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

我應該怎么做才能解決問題？

uj5u.com熱心網友回復：

您可以包裝您的堆疊小部件并更改其剪輯行為，試試這個：

Container(
        color: Colors.black,
        constraints: const BoxConstraints.expand(),
        child: Center(
          child: Column(
            children: [
              const SizedBox(height: 100),
              Container( // add this.
                clipBehavior: Clip.antiAlias,
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(15.0)),
                child: Stack(
                  alignment: Alignment.centerLeft,
                  children: [
                    Container(
                      width: 300,
                      height: 20,
                      decoration: BoxDecoration(
                          color: const Color(0XFFC41D3D).withOpacity(0.5),
                          borderRadius:
                              const BorderRadius.all(Radius.circular(15))),
                    ),
                    SizeTransition(
                      axis: Axis.horizontal,
                      sizeFactor: Tween(begin: 0.0, end: 1.0)
                          .chain(CurveTween(curve: const Interval(0.0, 0.4)))
                          .animate(_controller),

                      /// the container whose border radius is not working as expected
                      child: Container(
                        width: 300,
                        height: 20,
                        decoration: BoxDecoration(
                            color: const Color(0XFFC41D3D),
                            borderRadius: BorderRadius.circular(15.0)),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      )

uj5u.com熱心網友回復：

你可以只SizeTransition用ClipRRect它來包裝提供更逼真的形狀。

ClipRRect(
  borderRadius: BorderRadius.circular(15.0),
  child: SizeTransition(

標籤：扑 动画

上一篇：如何重置和重復CSS影片？

下一篇：mouseEntered和mouseExited同時觸發