我如何在Flutter中固定容器？

Question

我想将第一个容器固定在中间，将第二个容器固定在右边，但我不能。我在行行中添加了mainAxisAlignment：MainAxisAlignment.spaceBetween，但是没有用。是否有其他属性可以调整小部件的位置？

我的代码：

new Container(
  width: 360,
  height: 502,
  decoration: new BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xffffffff),
        Color(0x00caebfe) 
      ],
      stops: [0,1]
    )
  ),
  child:Column(
    //crossAxisAlignment: CrossAxisAlignment.start,
    children:<Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            child: Text("JULY 2017",
              style: TextStyle(
                fontFamily: 'Baloo',
                color: Color(0xff181743),
                fontSize: 20,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.normal,
              )
            )
          ),
          Container(
            alignment: Alignment.centerLeft,
            //padding: EdgeInsets.only(left:90.0),
            child: Column(
              children: <Widget>[
                new Container(
                width: 14,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c) 
                    ],
                    stops: [0,1]
                  ),
                )
              ),
              new Container(
                //margin: EdgeInsets.only(top:3.0),
                width: 23,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c) 
                    ],
                    stops: [0,1]
                  )
                )
              )
          ],)
          )
        ]
      )
    ]
  )
),

是否有其他属性可以调整小部件的位置？

Answer 1

[按照您说的要实现的目标，例如，使文本居中且渐变一直向右，我通过在Expanded的第一个Container周围添加Row小部件来修改了您的代码并删除顶部Container的宽度：

Container(
  height: 502,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xffffffff),
        Color(0x00caebfe)
      ],
      stops: [0,1]
    )
  ),
  child: Column(
    children:<Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text("JULY 2017",
                style: TextStyle(
                  fontFamily: 'Baloo',
                  color: Color(0xff181743),
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                  fontStyle: FontStyle.normal,
                )
              ),
            ),
          ),
          Column(
            children: <Widget>[
              new Container(
                width: 14,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c)
                    ],
                    stops: [0,1]
                  ),
                )
              ),
              new Container(
                //margin: EdgeInsets.only(top:3.0),
                width: 23,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c)
                    ],
                    stops: [0,1]
                  )
                )
              )
            ],)
        ]
      )
    ]
  )
),

Answer 2

您是否正在尝试将FirstContainer放置在最中央，而SecondContainer放置在最末端？

如果是，则可能要使用Row和Expanded

所以会是这样：

Row(
    mainAxisSize: MainAxisSize.max,
    children: [
        /// Just a placeholder container to occupy 1/3 of the Row
        Expanded(child: Container()),
        Expanded(child: FirstContainer()),
        Expanded(child: SecondContainer()),
    ]
)

这是添加一个占位符容器，该占位符容器占行的1/3，并且您的FirstContainer将被迫居中，而行的SecondContainer部分则位于该行。

Answer 3

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: new Container(
              width: 360,
              height: 502,
              decoration: new BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Color(0xffffffff), Color(0x00caebfe)],
                      stops: [0, 1])),
              child: Stack(
                  children: <Widget>[
                    Positioned(
                      right: 0,
                      child: Container(
                          alignment: Alignment.center,
                          child: Text("JULY 2017",
                              style: TextStyle(
                                fontFamily: 'Baloo',
                                color: Color(0xff181743),
                                fontSize: 20,
                                fontWeight: FontWeight.w400,
                                fontStyle: FontStyle.normal,
                              ))),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            child: Column(
                          children: <Widget>[
                            new Container(
                                width: 14,
                                height: 5,
                                decoration: new BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    gradient: LinearGradient(colors: [
                                      Color(0xfffe1e9a),
                                      Color(0xfffea64c)
                                    ], stops: [
                                      0,
                                      1
                                    ]))),
                            new Container(
                                //margin: EdgeInsets.only(top:3.0),
                                width: 23,
                                height: 5,
                                decoration: new BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    gradient: LinearGradient(colors: [
                                      Color(0xfffe1e9a),
                                      Color(0xfffea64c)
                                    ], stops: [
                                      0,
                                      1
                                    ])))
                          ],
                        ))),
                  ])),
        ),
      ),
    );
  }

使用堆栈检查此方法，它使以后变得很简单，以后可以修改谢谢。