Flutter笔记2-Container组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'WELCOME',
        home: Scaffold(
            appBar: AppBar(
              title: Text('welcome to Flutter'),
            ),
            body: Center(
              child: Container(
                child: Text('我是XXX',style: TextStyle(fontSize: 40.0),),
                width: 500.0,
                height: 400.0,
                alignment: Alignment.topLeft, // child内容对齐方式
                padding: const EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0), // padding 左上右下的顺序
                margin: const EdgeInsets.all(10.0), // 所有的4个方向
                decoration: new BoxDecoration( 
                  gradient: LinearGradient(  // 设置线性渐变
                    colors: [Colors.lightBlue,Colors.greenAccent,Colors.pink]
                  ),
                  border: Border.all(width: 12.0,color: Colors.yellow), //设置边框
                ),
              )
            ),
        ),
    );
  }
}

效果如下:

Flutter笔记2-Container组件_第1张图片
image.png

你可能感兴趣的:(Flutter笔记2-Container组件)