美文网首页
Flutter container组件、Text组件的简单使用

Flutter container组件、Text组件的简单使用

作者: 浩仔_Boy | 来源:发表于2020-11-11 18:02 被阅读0次
    import 'package:flutter/material.dart';
    
    /*
     * container(类似与前端里的div)
     * text组件使用
     */
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('container组件 text组件'),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    //内容区域
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Container(
            child: Text(
              'container组件 text组件 简单使用container组件 text组件 简单使用',
              textAlign: TextAlign.left, //文字位置状态(居中、居左等)
              overflow: TextOverflow.ellipsis, //文字换行展示
              textScaleFactor: 2, //字体放大几倍
              maxLines: 2, //文字最大行数
              style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                  fontWeight: FontWeight.w300, //字体粗细
                  fontStyle: FontStyle.italic, //字体倾斜
                  decoration: TextDecoration.lineThrough, //文本装饰线
                  decorationColor: Colors.black, //装饰线颜色
                  decorationStyle: TextDecorationStyle.wavy,
                  letterSpacing: 2.0 //字间距
                  ), //装饰线风格 实线、虚线、波浪等
            ),
            height: 300.0,
            width: 300.0,
            decoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(
                  color: Colors.black,
                  width: 2.0,
                ),
                borderRadius: BorderRadius.all(Radius.circular(10))), //圆角
            padding: EdgeInsets.all(10), //内边距
            transform: Matrix4.rotationZ(0.3), //对container容器进行一些旋转、平移、透明度的设置等
            alignment: Alignment.center, //container内不元素对齐方式
          ), //外层布局,类似div中的div
        );
      }
    }
    
    

    相关文章

      网友评论

          本文标题:Flutter container组件、Text组件的简单使用

          本文链接:https://www.haomeiwen.com/subject/vocybktx.html