Flutter FlatButton 内部 space
Flutter FlatButton inner space
在我的一个 flutter 应用程序中,有一个像下面这样的 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()),);
},
)
如何让按钮的文字右对齐?目前它居中,左右相等 space。
目前显示是这样
+-----------------+
| Button Text |
+-----------------+
我正在努力让它像
+-----------------+
| Button Text|
+-----------------+
您目前无法使用 Text
class textAlign
属性 来解决此问题,因为 Text
在 FlatButton
中占用最少 space。因此,属性 什么都不做。您需要设置一个 space 以供文本小部件使用。这是一个解决方案:
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'),
),
),
),
这将完美运行,检查一下。
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()),);
},
)),
上面的代码给出了以下输出:
在我的一个 flutter 应用程序中,有一个像下面这样的 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()),);
},
)
如何让按钮的文字右对齐?目前它居中,左右相等 space。
目前显示是这样
+-----------------+
| Button Text |
+-----------------+
我正在努力让它像
+-----------------+
| Button Text|
+-----------------+
您目前无法使用 Text
class textAlign
属性 来解决此问题,因为 Text
在 FlatButton
中占用最少 space。因此,属性 什么都不做。您需要设置一个 space 以供文本小部件使用。这是一个解决方案:
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'),
),
),
),
这将完美运行,检查一下。
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()),);
},
)),
上面的代码给出了以下输出: