(Flutter 二)Container:容器

2020-03-17  本文已影响0人  小豆豆苗

Container中对应的属性有:

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

在代码中可以对容器做一些操作

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
       body: Center(
          child: Container(
            child: new Text('Hello world',
              style: TextStyle(fontSize: 40),
            ),
            alignment: Alignment.topLeft, /*container组建内的子控件对齐方式
                topLeft,topCenter,topRight,
                centerLeft,center,centerRight,
                bottomLeft,bottomCenter,bottomRight,
            */
            width: 500.0,
            height: 400.0,
//            color: Colors.lightBlue,
            padding: const EdgeInsets.fromLTRB(10, 30, 0, 0),//const是声明一个常量的意思,设置子空间在容器中的边距,
            /*
            all表示四个边距都是一样的
            fromLTRB,表示给左、上、右、下分别设置边距
            * */
            margin: const EdgeInsets.all(10),//容器本身离屏幕的外边距
            decoration: BoxDecoration( //给容器做一些装饰
              gradient: const LinearGradient( //添加渐变色,线性渐变,由三种颜色组成。不能用color同时存在,否则会报错
                  colors:[Colors.lightBlue, Colors.greenAccent, Colors.purple]
              ),
               border: Border.all(width: 5.0, color: Colors.green //给容器添加边框
               ),
            ),
          ),
        ),
      )
    );
  }
}

运行结果如下:


image.png
上一篇下一篇

猜你喜欢

热点阅读