मैं एक स्थितिबद्ध ट्रांज़िशन का उपयोग करके कुछ विजेट्स को एनिमेट करने और कुछ अजीब व्यवहार प्राप्त करने का प्रयास कर रहा हूं। पोजिशनिंग ट्रांजिशन का बच्चा भी एक स्टैक है। मैंने साधारण स्थिति वाले विजेट और स्थिति वाले ट्रांज़िशन विजेट के व्यवहार की तुलना करने के लिए एक नमूना बनाया है:

  @override
  Widget build(BuildContext context) {
    Animation<RelativeRect> transition = RelativeRectTween(
            begin: RelativeRect.fromSize(
                Rect.fromLTWH(0, 0, 100, 100), Size(100, 100)),
            end: RelativeRect.fromSize(
                Rect.fromLTWH(50, 50, 100, 100), Size(100, 100)))
        .animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));

    return Stack(children: [
      PositionedTransition(rect: transition, child: getCircles()),
      Positioned(top: 50, right: 50, child: getCircles())
    ]);
  }

मैं उम्मीद करता हूं कि दोनों विजेट समान दिखें, हालांकि एक स्थिर और दूसरा एनिमेटेड है। लेकिन अगर आप इस डार्टपैड को देखें तो ऐसा नहीं है: पूर्ण कार्यशील डार्टपैड उदाहरण

क्या किसी को पता है कि क्या हो रहा है?

2
Jeroen Visscher 30 नवम्बर 2020, 00:52

1 उत्तर

सबसे बढ़िया उत्तर

आप नीचे पेस्ट रन पूरा कोड कॉपी कर सकते हैं
इस मामले में, आप Stack रैप Center और Positioned
का उपयोग कर सकते हैं सांकेतिक टुकड़ा

Stack(children: [
      ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 100, maxHeight: 100),
          child: DecoratedBox(
            decoration: BoxDecoration(
              border: Border.all(),
              color: Colors.green,
              borderRadius: BorderRadius.circular(50),
            ),
            child: Stack(
              children: [
                Center(
                    child: Text(
                  "circle",
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                )),
                Positioned(
                    bottom: 0,
                    right: 0,

काम कर रहे डेमो

enter image description here

पूरा कोड

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
    );
    _controller.duration = Duration(seconds: 2);
    _controller.addListener(() => setState(() {}));
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _controller.forward();
    });
  }

  @override
  Widget build(BuildContext context) {
    Animation<RelativeRect> transition = RelativeRectTween(
            begin: RelativeRect.fromSize(
                Rect.fromLTWH(0, 0, 100, 100), Size(100, 100)),
            end: RelativeRect.fromSize(
                Rect.fromLTWH(50, 50, 100, 100), Size(100, 100)))
        .animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));

    return Stack(children: [
      PositionedTransition(rect: transition, child: getCircles()),
      Positioned(top: 50, right: 50, child: getCircles())
    ]);
  }

  Widget getCircles() {
    return Stack(children: [
      ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 100, maxHeight: 100),
          child: DecoratedBox(
            decoration: BoxDecoration(
              border: Border.all(),
              color: Colors.green,
              borderRadius: BorderRadius.circular(50),
            ),
            child: Stack(
              children: [
                Center(
                    child: Text(
                  "circle",
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                )),
                Positioned(
                    bottom: 0,
                    right: 0,
                    child: ConstrainedBox(
                        constraints:
                            BoxConstraints(maxWidth: 40, maxHeight: 40),
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                            border: Border.all(),
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Center(
                              child: Text(
                            "mini",
                            style: TextStyle(
                                fontSize: 12, fontWeight: FontWeight.bold),
                          )),
                        ))),
              ],
            ),
          )),
    ]);
  }
}
1
chunhunghan 30 नवम्बर 2020, 07:00