我只是在Flutter中创建一个表单。我无法设置按钮的上边距。
class _MyHomePageState extends State<MyHomePage> {
String firstname;
String lastname;
final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return new Scaffold(
key: scaffoldKey,
appBar: new AppBar(
title: new Text('Validating forms'),
),
body: new Padding(
padding: const EdgeInsets.all(16.0),
child: new Form(
key: formKey,
child: new Column(
children: [
new TextFormField(
decoration: new InputDecoration(labelText: 'First Name'),
validator: (val) =>
val.length == 0 ?"Enter FirstName" : null,
onSaved: (val) => firstname = val,
),
new TextFormField(
decoration: new InputDecoration(labelText: 'Password'),
validator: (val) =>
val.length ==0 ? 'Enter LastName' : null,
onSaved: (val) => lastname = val,
obscureText: true,
),
new RaisedButton(
onPressed: _submit,
child: new Text('Login'),
),
],
),
),
),
);
}
答案 0 :(得分:14)
将您的按钮放在Container内,然后设置边距
new Container(
margin: const EdgeInsets.only(top: 10.0),
child : new RaisedButton(
onPressed: _submit,
child: new Text('Login'),
),
答案 1 :(得分:6)
或者,您也可以将按钮填充为Padding。 (这是Container内部执行的操作。)
Padding(
padding: const EdgeInsets.all(20),
child: new RaisedButton(
onPressed: _submit,
child: new Text('Login'),
),
);
有关为小部件增加边距的更多信息,请参见this answer。
答案 2 :(得分:1)
我找到了EdgeInsets.symmetric:
child : new RaisedButton(
onPressed: _submit,
child: new Text('Login'),
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
),
答案 3 :(得分:0)
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(data.dataList[index].codeName, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: UtilColors.darkGrey)),
Row(
//TODO to edit employee details
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Expanded(child: Text(BasicAction.formatDate(data.dataList[index].payDate), style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: UtilColors.darkGrey))),
Padding(
padding: EdgeInsets.all(4),
child: Text('Edit', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: UtilColors.blueColor)),
),
],
),
],
),
in this on edit text how to set clicklistenr
答案 4 :(得分:0)
您可以像这样在 Card 上使用 margin 和 padding :-
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: _newsArticles.length,
padding: EdgeInsets.symmetric(horizontal: 2,vertical: 2),
itemBuilder: (context, index) {
return Card( // <-- Card widget
shadowColor: Colors.grey,
elevation: 3,
margin: EdgeInsets.all(5.0),
child: ListTile(
title: _newsArticles[index].urlToImage == null ?
Image.asset(Constants.NEWS_PLACEHOLDER_IMAGE_ASSET_URL) :
Image.network(_newsArticles[index].urlToImage),
subtitle: Text(_newsArticles[index].title, style: TextStyle(fontSize: 14)),
),
);
},
)
);
}
答案 5 :(得分:0)
在 Flutter 2.0 中,RaisedButton 已被弃用,ElevatedButton 是替代品。
因此,您可以使用 ElevatedButton 并将样式设置为波纹管以去除边距:
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.add),
label: Text(
'Add Place',
),
style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
),
答案 6 :(得分:0)
这就是我一般设置小部件的大小、填充和边距的方式。这是按钮的示例:
Container(
margin: EdgeInsets.only(top: 10), // Top Margin
child:
ElevatedButton(
style: TextButton.styleFrom(
// Inside Padding
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 20),
// Width,Height
minimumSize: Size(300, 30),
),
child: Text('Upload Data'),
onPressed: () {submitForm();},
),
),
其他选项是
Container(
margin: EdgeInsets.only(top:20),
child:
ElevatedButton(
设置水平和垂直边距
Container(
margin: EdgeInsets.symmetric(horizontal: 0, vertical: 20),
child:
Container(
margin: EdgeInsets.all(20),
child:
ElevatedButton(
Container(
margin: EdgeInsets.fromLTRB(5,10,5,10),
child:
ElevatedButton(
答案 7 :(得分:-1)
自定义按钮的属性时,您应该使用ButtonTheme
。
ButtonTheme(
padding: EdgeInsets.all(16), // Set your padding
child: RaisedButton(onPressed: () {}, child: Text('Button')),
)