容器项目视图边距

时间:2018-03-29 04:43:45

标签: 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

如何使按钮具有上边距?

1 个答案:

答案 0 :(得分:0)

I think this what you want

如果是!,您可以使用

  1. 填充类(Documentation

  2. 容器类(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);
            }
      ),);
    
  3. 在Column中添加_raisedButton。