如何在 flutter 中独立于其他 Widget 定位 Widget？

Question

我曾尝试使用 Column 在单页中放置 3 个小部件，但由于某种原因无法对齐...

@override
  Widget build(BuildContext context) {

    return Container(
      height: double.infinity,
      child: SwipeDetector(
        onSwipeUp: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => CreditScreen()));
        },

        onSwipeDown: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => ManualScreen()));
        },
        
        child: Scaffold(
          backgroundColor: DarkBlue,
          resizeToAvoidBottomInset: false,
          body: new Container(
            height: double.infinity,
            alignment: Alignment.center,
            child: Column(
              //mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Align(
                  alignment: Alignment.topCenter,
                  child: Image.asset('assets/swipe_down.gif',
                    scale: 5,
                  ),
                ),

                new Align(
                  alignment: Alignment.center,
                  child: Text("Menu Screen",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30.0,
                      fontWeight: FontWeight.bold,
                    ),
                    //textAlign: TextAlign.center,
                  ),
                ),

                new Align(
                  alignment: Alignment.bottomCenter,
                  child: Image.asset('assets/swipe_up.gif',
                    scale: 5,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

根据上图，我想要在底部向上滑动小部件并在文本居中的情况下在顶部向下滑动，我尝试了很多小部件的包装，但似乎没有任何效果...... 任何帮助...

Answer 1

试试这个：

Column(
              //mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset('assets/swipe_down.gif',
                    scale: 5,
                  ),

               Expanded(
                  child: Text("Menu Screen",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30.0,
                      fontWeight: FontWeight.bold,
                    ),
                    //textAlign: TextAlign.center,
                  ),
                ),

                Image.asset('assets/swipe_up.gif',
                    scale: 5,
                  ),
                
              ],
            ),

Answer 2

您可以使用中心小部件将小部件居中对齐，并使用填充小部件在小部件之间留出空间。

 Scaffold(
      backgroundColor: Colors.black,
      resizeToAvoidBottomInset: false,

      body: new Container(
        height: double.infinity,
        alignment: Alignment.center,

      child:
        Center(
           child: Column(
                   children: <Widget>[
                           Padding(
                              padding: EdgeInsets.only(top:30),
                              child: Image.asset('assets/swipe_down.gif'),
                              ),


            Padding(
              padding: EdgeInsets.only(top:80),
              child: 
                   Text("Menu Screen",
                          style: TextStyle(
                          color: Colors.white,
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold 
                      ),
                ),
            ),


        Padding(
          padding: EdgeInsets.only(top:80),
          child: Image.asset('assets/swipe_up.gif'),
            ),

          ],
        ),
      ),
     ),
   ),

如何在 flutter 中独立于其他 Widget 定位 Widget？

How to Position Widgets Independently of Other Widgets in flutter?

position

widget

flutter