1

在我的一个颤振应用程序中，有一个像下面这样的 FlatButton

FlatButton(
   child: Text("Forgot ist ?",
       style: TextStyle(color: Color.fromRGBO(107, 106, 106, 1),fontFamily: 'ActoBook'),
       textAlign: TextAlign.left
   ),

   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
   splashColor: Colors.transparent,  
   highlightColor: Colors.transparent,
   shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(0.0),
      side: BorderSide(color: Colors.transparent),
   ),
   onPressed: (){
       Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()),);
  },
)

如何使按钮的文本右对齐？目前它以左右相等的空间居中。

目前显示是这样的

+-----------------+
|   Button Text   |
+-----------------+

我试图让它像

+-----------------+
|      Button Text|
+-----------------+
4

2 回答 2

1

您目前无法使用TextclasstextAlign属性来解决此问题，因为Text内部 aFlatButton占用最少的空间。因此，该属性将无能为力。您需要设置文本小部件占用的空间。这是一个解决方案：

FlatButton(
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          splashColor: Colors.transparent,  
          highlightColor: Colors.transparent,
          shape: RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(0.0),
            side: BorderSide(color: Colors.black),
          ),
          onPressed: (){
            Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()));
          },
          child: Container(
            alignment: Alignment.centerRight,
            width: 100, // choose your width
            child: Text("Forgot ist ?",
              style: TextStyle(color: Color.fromRGBO(107, 106, 106, 1),fontFamily: 'ActoBook'),
            ),
          ),
        ),
于 2020-05-02T09:50:54.040 回答
0

这将完美地工作，检查一下。

FlatButton(
        padding: EdgeInsets.zero,
        color: Colors.blue,
        // wrap the text in a container and give it a specified width
        child: Container(
          width: 100,
          child: Text(
            "Forgot ist ?",
            style: TextStyle(
              color: Color.fromRGBO(107, 106, 106, 1),
              fontFamily: 'ActoBook',
            ),
            // set the alignment of the text to TextAlign.end
            textAlign: TextAlign.end,
          ),
        ),
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        shape: RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(0.0),
          side: BorderSide(color: Colors.transparent),
        ),
        onPressed: () {
        Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()),);
        },
      )),

上面的代码给出了以下输出： 这是输出

于 2020-05-03T00:16:55.310 回答