容器项目视图边距

Question

我想让容器项目有边距。但是flutter好像不支持这个功能？我该怎么做，即使在 ios 和 android.

中很容易做到

 import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primaryColor: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  double billAmount;
  double tipPercentage = 0.0;

  @override
  Widget build(BuildContext context) {


      TextField billAmountField = new TextField(
         decoration: new InputDecoration(
           labelText: "Bill Amount"
         ),
         keyboardType: TextInputType.number,
         onChanged: (value){
             try {
                billAmount = double.parse(value);
              } catch (exception) {
                billAmount = 0.0;
              }
         },
      );

      TextField tipPercentageField = new TextField(

        decoration: new InputDecoration(labelText: "tipssss"),
        keyboardType: TextInputType.number,
         onChanged: (value){
             try {
                tipPercentage = double.parse(value);
              } catch (exception) {
                tipPercentage = 0.0;
              }
         },
      );

      RaisedButton calButton = new RaisedButton(
        child: new Text("Cal"),

        onPressed: (){
                    // Calculate tip and total
          double calculatedTip = billAmount * tipPercentage / 100.0;
          double total = billAmount + calculatedTip;

          // Generate dialog
          AlertDialog dialog = new AlertDialog(
          content: new Text("Tip: $$calculatedTip \n"
              "Total: $$total")
          );

          // Show dialog
          showDialog(context: context, child: dialog);
        }
          ,
      );

      Container container = new Container(

          margin: const EdgeInsets.all(30.0),

        child : new Column(

          children: <Widget>[billAmountField,tipPercentageField,calButton],

        )
      );



      return new Scaffold(appBar: new AppBar(title: new Text("Test")) , body: container,);
  }

}

代码是将项目视图添加到容器并在主页中显示

图像是代码的结果

the result of the code

我怎样才能让按钮有上边距？

Answer 1

I think this what you want

如果是！，您可以使用

填充 Class(Documentation) OR

容器Class(Documentation)

Padding _raisedButton = new Padding(
  padding: new EdgeInsets.only(top: 20.0),
  child: new RaisedButton(
    child: new Text("Cal"),
        onPressed: (){
          double calculatedTip = billAmount * tipPercentage / 100.0;
          double total = billAmount + calculatedTip;
          AlertDialog dialog = new AlertDialog(
            content: new Text("Tip: $$calculatedTip \n"
            "Total: $$total")
          );
          showDialog(context: context, child: dialog);
        }
  ),);

并在 Column 中添加 _raisedButton。

容器项目视图边距

Container item view margin

flutter