flutter 中心组件Center、容器组件Container、文本组件Text

比眉伴天荒 2021-07-24 17:54 438阅读 0赞

Center:
    子组件将在中心位置摆放,且只能控制子组件,不能控制子组件内的组件
    
    	Center(
    		child:
    	)
    	
    Container:
    类似div
    
    	Container(
    		child:
    		height:浮点值
    		width:称名父元素,值可以设置成double.infinity
    		color:Colors.xx  背景色
    		decoration: BoxDecoration( 定义container的样式
              color: Colors.pink,   背景色
              border:Border.all(    边框
    	            color:Colors.blue,
    	            width:2.0  
          		),
          	 border: Border(right: BorderSide(color:,width: ))单个边框
          	 borderRadius: BorderRadius.all(Radius.circular(n)),  圆角
          	 borderRadius: BorderRadius.circular(n), 圆角 或 利用 ClipOval组件设置圆角
          	 boxShadow: [BoxShadow(blurRadius: 6,color:Colors.red,spreadRadius: 4,offset:Offset(x位移,y位移)]
          ),
        padding:EdgeInsets.all(浮点值) ,  margin和padding设置一样
        padding:EdgeInsets.fromLTRB(n, n, n, n),
        padding:EdgeInsets.only(top:x,left:x,...)
        
        transform:Matrix4.translationValues(x,y,z) , //位移变化
        alignment: Alignment.bottomLeft   内部组件摆放位置
          	
    	)
    
    Text:
    文本
    
    	Text('文本内容', 变量使用 '$变量名'、'${this.xx}'、'${表达式}'
          textAlign: TextAlign.center,  水平居中
          
          style:TextStyle(
              fontSize: 20.0,
              color:Colors.purple,
              fontWeight:FontWeight.bold,
              decoration: TextDecoration.lineThrough,  下划线等样式
              decorationColor: Colors.white,     下划线等颜色
              decorationStyle: TextDecorationStyle.dotted   下划线的形式
          ),  字体样式
          overflow: TextOverflow.ellipsis,  超出范围样式
          maxLines: 2,  允许行数
          textScaleFactor: 2, 字体放大倍数

代码示例:

import 'package:flutter/material.dart';
    
    void main()
    { 
      runApp(App());
    }
    
    class App extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
          home:Scaffold(
            appBar: AppBar(title: Text('hello1')),
            body:Home()
            )
        );
      }
    }
    
    class Home extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return Center(
          child:Container(
            child: Text('文本啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊嗷嗷嗷嗷',
              textAlign: TextAlign.center, //水平居中
              style:TextStyle(fontSize: 20.0,color:Colors.purple,fontWeight:FontWeight.bold,decoration: TextDecoration.lineThrough,decorationColor: Colors.white,decorationStyle: TextDecorationStyle.dotted ), //字体样式
              overflow: TextOverflow.ellipsis,  //超出范围
              maxLines: 2, //允许行数
              textScaleFactor: 2, //字体放大倍数
              
            ),
            height: 300.0,
            width: 300.0,
            decoration: BoxDecoration( //定义背景container的样式
              color: Colors.pink,
              border:Border.all( //边框
                color:Colors.blue,
                width:2.0
              ),
              borderRadius: BorderRadius.all(Radius.circular(8))
            ),
            // padding:EdgeInsets.all(20.0) ,
            padding: EdgeInsets.fromLTRB(10, 20, 30, 20),
            transform:Matrix4.translationValues(100,0,0) , //变化
            alignment: Alignment.bottomLeft,
            
          )
        );
      }
    }