flutter常用组件

Posted 2022-08-16 yangqinoak

 

TextWidget  文本组件

TextWidget  的常用属性

TextAlign: 下面的五种对齐方式 左对齐， 右对齐， 居中对齐， 从开始位置对齐 

 

MaxLines： 显示几行

overflow： 超出范围截取后的样式  clip 直接阶段， ellipsis 后面省略号...    fade 超出后渐变，

 

decoration ： underline  下划线  linethrough 中间穿过  none 不显示 overline 上划线

 

decorationStye： 下划线样式  dashed 虚线， dotted 很细的虚线  double两条实线   solid 实线 wavy 波浪线

 

 完整代码

import ‘package:flutter/material.dart‘;

void main() => runApp(MyApp());

// 定义MyApp 继承于静态组件
class MyApp extends StatelessWidget 

  @override // 重写关键字

  //返回一个组件
  Widget build(BuildContext context) 

    // TODO: implement build
    return MaterialApp(// 返回的一些组件属性

      title :‘first Flutter‘,//

      home: Scaffold(// 首页

        appBar: AppBar(// 导航栏

          title: Text(‘firstDemo‘),// 导航栏标题
        ),

        body: Center(

          child: Text(
            ‘我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目‘,
//            textAlign: TextAlign.left,//对齐方式
//            maxLines: 2,//最多显示几行
//            overflow: TextOverflow.ellipsis,//超出部分截取样式 ...

          style: TextStyle(// 文本样式
            fontSize: 25.0,// 字体大小必须小数点第一位
            color: Color.fromARGB(255, 255, 150, 150),// 字体颜色 rgb
              decoration: TextDecoration.underline,// 下划线
            decorationStyle:  TextDecorationStyle.wavy //下划线样式


          ),
          ),// 居中

        ),

      ),

    );
  

 

 

Container  容器组件  == >div

 

 

 

padding  内边距

 将上面的body 替换下

body: Center(

  child: Container(// 组件
    child: new Text( // 创建一个text 
      ‘Hello‘,
      style: TextStyle(// 样式
        fontSize: 40,
      ),


    ),

    alignment: Alignment.center, // 容器对齐方式
    width: 500.0,// 宽
    height: 300,// 高
    color: Colors.cyan, // 颜色　　

  )
),