在 flutter 中设置小部件对齐方式

Question

大家好，我想在产品详细信息文件中使用底部导航器，但我的行小部件中有两个容器。我想在左侧设置我的第一个容器（旧价格和新价格列），还想在右侧设置我的第二个容器（添加到购物车 btn）。我怎样才能做到这一点？

代码如下：

bottomNavigationBar: Material(
    elevation: 7.0,
    color: Colors.white,
    child: Container(
      height: 60.0,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,

      child: Row(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: Container(
              height: 40.0,
              width: MediaQuery.of(context).size.width - 280.0,
              decoration: BoxDecoration(
                color: Color(0xfff40725),

                borderRadius: BorderRadius.circular(10),
              ),

              child: Center(
                child: Text(
                  'Add to cart',
                  style: TextStyle(color: Colors.white,fontSize: 20.0,fontWeight: FontWeight.bold),
                ),

              ),

            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left:8.0),
            child: Container(
              child: Column(
                children: <Widget>[
                  Text("$${widget.prod_old_price}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0,color: Color(0xff989898),decoration: TextDecoration.lineThrough),),
                  Text("$${widget.prod_price}",style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold)),
                ],
              ),
            ),
          ),
          ],
        ),
      ),
    ),

Answer 1

试试这个：

bottomNavigationBar: Material(
    elevation: 7.0,
    color: Colors.white,
    child: Container(
      height: 60.0,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,

      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: Container(
              height: 40.0,
              width: MediaQuery.of(context).size.width - 280.0,
              decoration: BoxDecoration(
                color: Color(0xfff40725),

                borderRadius: BorderRadius.circular(10),
              ),

              child: Center(
                child: Text(
                  'Add to cart',
                  style: TextStyle(color: Colors.white,fontSize: 20.0,fontWeight: FontWeight.bold),
                ),

              ),

            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left:8.0),
            child: Container(
              child: Column(
                children: <Widget>[
                  Text("$${widget.prod_old_price}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0,color: Color(0xff989898),decoration: TextDecoration.lineThrough),),
                  Text("$${widget.prod_price}",style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold)),
                ],
              ),
            ),
          ),
          ],
        ),
      ),
    ),

Answer 2

在Row中设置适当的mainAxisAlignment。可以参考this

我会把它设置为 mainAxisAlignment: MainAxisAlignment.spaceAround

在 flutter 中设置小部件对齐方式

set an widget alignment in flutter

alignment

flutter

bottomnavigationview