【问题标题】:FLUTTER | Right Align not working颤振 |右对齐不起作用
【发布时间】:2018-11-11 09:40:29
【问题描述】:

试图将容器与文本视图子视图右对齐,它有一个位于另一列内的父行,尝试了 Stack Overflow 中的多种解决方案,但均无效。

代码

///Transactions Heading
        new Column(
         children: <Widget>[
            new Row(
              children: <Widget>[
                new Container(
                  alignment: Alignment.centerLeft,
                  margin: new EdgeInsets.only(top: 20.0, left: 10.0),
                  child: new Text(
                    "Transactions",
                    style: new TextStyle(
                      color: primaryTextColor,
                      fontSize: 25.0,
                      fontWeight: FontWeight.w700,
                      letterSpacing: 0.1,
                    ),
                  ),
                ),
                new Container(
                  margin: new EdgeInsets.only(top: 25.0),
                  child: new Text(
                    currentGoalTransactions.length.toString() + " items",
                    style: new TextStyle(
                        color: darkHeadingsTextColor, fontSize: 15.0),
                  ),
                ),
              ],
            ),
       ]);

想要将 2 项文本向右对齐

Screenshot

【问题讨论】:

  • 你能分享一下你想要什么的图片吗?

标签: flutter flutter-layout


【解决方案1】:

Row 小部件中使用 mainAxisAlignment 属性。

new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween, 
    ...
)

【讨论】:

    【解决方案2】:

    使用Spacer 将获得剩余空间并将小部件平均分配

         Row(
            children: <Widget>[
              Text("Text 1", style: TextStyle(fontSize: 20),),
              Spacer(),
              Text("Text 2", style: TextStyle(fontSize: 20),),
              Spacer(),
              Text("Text 3", style: TextStyle(fontSize: 20),),
            ],
          ),
    

    输出:

    【讨论】:

      【解决方案3】:

      截图:


      您也可以像这样尝试Wrap

      Wrap(
        spacing: 50, // spacing between each of the widgets below
        children: <Widget>[
          Text("One"),
          Text("Two"),
          Text("Three"),
        ],
      )
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2018-11-17
        • 2021-02-20
        • 2021-04-04
        • 1970-01-01
        • 1970-01-01
        • 2012-11-12
        • 1970-01-01
        相关资源
        最近更新 更多