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

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  
      		),
      	  borderRadius: BorderRadius.all(Radius.circular(n)),  圆角
      	   borderRadius: BorderRadius.circular(n), 圆角 或 利用 ClipOval组件设置圆角
      ),
    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('文本内容',
      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,
        
      )
    );
  }
}
发布了670 篇原创文章 · 获赞 4 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/105442565