Flutter Container组件、Text组件详解

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
void main(){
  runApp(MyApp());
}
//自定义组件
//StatelessWidget:无状态组件,状态不可变的widget
//StatefulWidget:有状态组件,状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class  MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(
        primarySwatch: Colors.red
      ),
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      //定义一个容器Container
      child: Container(
        child: Text(
          "我是一个文本,我是一个文本,我是一个文本,我是一个文本",
          //文本显示方式
          textAlign: TextAlign.center,
          //文本样式
          style: TextStyle(
            //字体大小
            fontSize: 18.0,
            //字体颜色
            color: Colors.red,
            //字体粗细
            fontWeight: FontWeight.bold,
            //设置字体是否倾斜
            fontStyle: FontStyle.italic,
            //装饰线,从中间穿过
            decoration: TextDecoration.lineThrough,
            //装饰线的颜色
            decorationColor: Colors.blue,
            //装饰线的风格,虚线
            decorationStyle:TextDecorationStyle.dashed,
            letterSpacing: 10.0,
            

          ),
          //文本溢出方式,超出部分...
          overflow: TextOverflow.ellipsis,
          //最大行数
          maxLines: 1,
          //字体缩放倍数
          textScaleFactor: 1.2,

          ),
        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(10.0)
          )
        ),
        //内边距
        //padding:EdgeInsets.all(20.0) ,
        padding:EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
        //位移
        transform: Matrix4.translationValues(10, 0, 0),
        //容器元素对齐方式
        alignment: Alignment.center,
      ),
  );
  }
}

Flutter Container组件、Text组件详解_第1张图片

 

 

你可能感兴趣的:(Flutter,Flutter)