Container 组件

喜欢ヅ旅行 2021-09-13 15:32 441阅读 0赞

**一、主要参数说明：**

alignment:  topCenter：顶部居中对齐
    			topLeft：顶部左对齐
    			topRight：顶部右对齐
    			center：水平垂直居中对齐
    			centerLeft：垂直居中水平居左对齐
    			centerRight：垂直居中水平居右对齐
    			bottomCenter 底部居中对齐
    			bottomLeft：底部居左对齐
    			bottomRight：底部居右对齐
    
    decoration: BoxDecoration(  // 容器框装饰
    				color: Colors.blue,
    						border: Border.all(
    							color: Colors.red,
    							width: 2.0,
    						),
    						borderRadius: BorderRadius.all(
    							Radius.circular(8.0)
    						)
    				)
    margin: 表示 Container 与外部其他组件的距离，如 EdgeInsets.all(20.0)			
    
    padding: 内边距，指Container 边缘与 Child 之间的距离，如 padding: EdgeInsets.all(10.0) 
    
    transform: 让 Container 容易进行一些旋转之类的，如 transform: Matrix4.rotationZ(0.2)
    
    height: 容器高度
    
    width: 容器宽度
    
    child: 容器子元素

**二、容器结构图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]  
**三、代码示例**

import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(title: Text("flutter demo")), body: HomeContent()));
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
          child: Container(
            child: Text('各位同学大家好我是主讲老师大地，各位同学大家好我是主讲老师大地',
                textAlign: TextAlign.left,
                overflow: TextOverflow.ellipsis,
                // overflow:TextOverflow.fade ,
                maxLines: 2,
                textScaleFactor: 1.8,
                style: TextStyle(
                    fontSize: 16.0,
                    color: Colors.red,
                    // color:Color.fromARGB(a, r, g, b)
                    fontWeight: FontWeight.w800,
                    fontStyle: FontStyle.italic,
                    decoration: TextDecoration.lineThrough,
                    decorationColor: Colors.white,
                    decorationStyle: TextDecorationStyle.dashed,
                    letterSpacing: 5.0)),
            height: 300.0,
            width: 300.0,
            decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(color: Colors.blue, width: 2.0),
                borderRadius: BorderRadius.all(
                  //  Radius.circular(150),    //圆形
                  Radius.circular(10),
                )),
            // padding:EdgeInsets.all(20),
    
            // padding:EdgeInsets.fromLTRB(10, 30, 5, 0)
    
            margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
    
            // transform:Matrix4.translationValues(100,0,0)
    
            // transform:Matrix4.rotationZ(0.3)
    
            // transform:Matrix4.diagonal3Values(1.2, 1, 1)
    
            alignment: Alignment.bottomLeft,
          ),
        );
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hzal9ibG9n_size_16_color_FFFFFF_t_70]: /images/20210913/addf4157620f405b946e17de10ddba44.png