笔录 Flutter (一) Container 、Text属性、使用

Flutter练习demo

属性

Container

Text

TextStyle

使用

import 'package:flutter/material.dart';
import 'ContainerPage.dart';
import 'TextPage.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    return ContainerPage();
    return TextPage();
  }
}

Text组件

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter'),
          ),
          body: Center(
            child: Text(
              "Flutter Text属性介绍Flutter Text属性介绍Flutter",
              maxLines: 1,
//              textScaleFactor:3,
//              textAlign:TextAlign.right,
//              textDirection: TextDirection.ltr,
              overflow: TextOverflow.ellipsis,// text文字超出屏幕，省略号代替
              style: TextStyle(
                wordSpacing: 20, // 单词间隙(如果是负值，会让单词变得更紧 凑
                letterSpacing:3,//字母间隙(如果是负值，会让字母变得更紧 凑)
                decoration:TextDecoration.underline,//下划线
                decorationColor: Colors.black,// 下划线颜色
                decorationStyle: TextDecorationStyle.wavy,// 波浪线
                color: Colors.red,
                fontSize: 20,
                fontStyle: FontStyle.italic, // 斜体
                fontWeight: FontWeight.bold, // 加粗
              ),

            ),
          )),
    );
  }
}

Container组件

import 'package:flutter/material.dart';

class ContainerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter'),
          ),
          body: Center(
              child: Container(
                transform: Matrix4.rotationX(0.2),//绕X轴旋转

//            margin: EdgeInsets.all(20), // 外部有其他组件方便观察 ，跟xml布局中的margin一个意思
                padding: EdgeInsets.only(left: 20),
                alignment: Alignment.center,// 对齐方式

                decoration: BoxDecoration(
                  // 盒子装饰
                    boxShadow: [
                      //阴影位置由offset决定,阴影模糊层度由blurRadius大小决定（大就更透明更扩散），阴影模糊大小由spreadRadius决定
                      BoxShadow(
                          color: Color(0x00EEee00f0),
//                      offset: Offset(2,2),
                          blurRadius: 10,
                          spreadRadius: 2),
                    ],
//                  环形渲染
//                    gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror),
                    //扫描式渐变
//                    gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14),
                   // 线性渐变
                    gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 1), end: FractionalOffset(0, 1)),


                    color: Colors.cyan,
                    border: Border.all(
                      //  边框线
                        color: Colors.black,
                        width: 4 // 设置边框线的宽度
                    ),
//                borderRadius:BorderRadius.all(Radius.circular(50))//圆角 4个角
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(30),
                        topRight: Radius.circular(30)) // 指定某个角设置圆角
                ),
                child: Text(
                  "Container容器中的文字",
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 30,
                    fontStyle: FontStyle.italic, // 斜体
                    fontWeight: FontWeight.bold, // 加粗
                  ),
                ),
                width: 300,
                height: 300,
              )),
        ));
  }

}