【自学Flutter】12 使用Padding给子Widget填充距离

12 使用Padding给子Widget填充距离

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.grey,
            body:
              Padding(
                padding: EdgeInsets.all(50.0),
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(left: 60.0),
                      child: Container(
                        child: Text("距离左边60距离"),
                        color: Colors.blue,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(vertical: 30.0),
                      child: Container(
                        child: Text("距离上下30距离"),
                        color: Colors.yellowAccent,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(15.0,15.0,20.0,20.0),
                      child:  Container(
                        child: Text("距离左边15，上边15，右边20，下边20距离"),
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              )
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.grey,
            body:
              //使用Padding给子Widget填充距离
              Padding(
                //填充所有方向距离
                padding: EdgeInsets.all(50.0),
                child: Column(
                  children: <Widget>[
                    Padding(
                      //填充指定方向距离
                      padding: EdgeInsets.only(left: 60.0),
                      child: Container(
                        child: Text("距离左边60距离"),
                        color: Colors.blue,
                      ),
                    ),
                    Padding(
                      //填充水平(左右)和垂直(上下)方向距离
                      padding: EdgeInsets.symmetric(vertical: 30.0),
                      child: Container(
                        child: Text("距离上下30距离"),
                        color: Colors.yellowAccent,
                      ),
                    ),
                    Padding(
                      //填充指定大小的四边距离
                      padding: EdgeInsets.fromLTRB(15.0,15.0,20.0,20.0),
                      child:  Container(
                        child: Text("距离左边15，上边15，右边20，下边20距离"),
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              )
        )
    );
  }
}

3.效果图