美文网首页
(Flutter 二)Container:容器

(Flutter 二)Container:容器

作者: 小豆豆苗 | 来源:发表于2020-03-17 14:01 被阅读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

    相关文章

      网友评论

          本文标题:(Flutter 二)Container:容器

          本文链接:https://www.haomeiwen.com/subject/twltyhtx.html