Flutter Container组件、Text组件详解

目录

1. Container容器组件

        1.1 Container使用

        1.2 Container alignment使用

        1.3 Container border边框使用

        1.4 Container borderRadius圆角的使用

        1.5 Container boxShadow阴影的使用

        1.6 Container gradient背景颜色渐变

        1.7 Container gradient RadialGradient 背景颜色渐变

        1.8 Container 实现圆角按钮

        1.9 Container transform的使用

2. Text组件详解

        2.1 TextStyle组件详解

        2.2 Text textAlign/maxLines/overflow 的使用

        2.2 Text 字符间距/倾斜字体的使用


1. Container容器组件

        1.1 Container使用

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: Scaffold(appBar: AppBar(title: Text("Home")), body: MyApp()),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.topLeft, //配置Container容器内的方位
        width: 100,
        height: 100,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Text("你好", style: TextStyle(color: Colors.blue)),
      ),
    );
  }
}

        1.2 Container alignment使用


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center, //配置Container容器内的方位
        width: 100,
        height: 100,
        decoration: BoxDecoration(color: Colors.yellow),
        child: Text("你好", style: TextStyle(color: Colors.blue)),
      ),
    );
  }
}

        1.3 Container border边框使用

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: Scaffold(appBar: AppBar(title: Text("Home")), body: MyApp()),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        //配置Container容器内的方位
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.red), //边框
        ),
        child: Text("你好", style: TextStyle(color: Colors.blue)),
      ),
    );
  }
}

         1.4 Container borderRadius圆角的使用

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        //配置Container容器内的方位
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.red),//边框
          borderRadius: BorderRadius.circular(10),//配置圆角
        ),
        child: Text("你好", style: TextStyle(color: Colors.blue)),
      ),
    );
  }
}

        1.5 Container boxShadow阴影的使用


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        //配置Container容器内的方位
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.red),//边框
          borderRadius: BorderRadius.circular(10),//配置圆角
          boxShadow:[ //阴影
            BoxShadow(
              color: Colors.black,
              blurRadius: 10
            )
          ]
        ),
        child: Text("你好", style: TextStyle(color: Colors.blue)),
      ),
    );
  }
}

        1.6 Container gradient背景颜色渐变

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: Scaffold(appBar: AppBar(title: Text("Home")), body: MyApp()),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        //配置Container容器内的方位
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.red),//边框
          borderRadius: BorderRadius.circular(10),//配置圆角
          boxShadow:[ //阴影
            BoxShadow(
              color: Colors.black,
              blurRadius: 2
            )
          ],
          gradient:LinearGradient(colors: [Colors.red,Colors.yellow,]) //背景颜色渐变 LinearGradient=线性渐变 RadialGradient= 径性渐变
        ),
        child: Text("你好", style: TextStyle(color: Colors.blue)),
      ),
    );
  }
}

        1.7 Container gradient RadialGradient 背景颜色渐变

        1.8 Container 实现圆角按钮

import 'package:flutter/material.dart';

main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Home")),
        body: Column(children: [MyApp(), MyButton()]),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        //配置Container容器内的方位
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.red),
          //边框
          borderRadius: BorderRadius.circular(10),
          //配置圆角
          boxShadow: [
            //阴影
            BoxShadow(color: Colors.black, blurRadius: 2),
          ],
          gradient: LinearGradient(
            colors: [Colors.red, Colors.yellow],
          ), //背景颜色渐变 LinearGradient=线性渐变 RadialGradient= 径性渐变
        ),
        child: Text("你好", style: TextStyle(color: Colors.blue)),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      // margin: EdgeInsets.all(10), //边距
      // margin: EdgeInsets.all(10), //边距
      margin: EdgeInsets.fromLTRB(0,20,0,0), //边距
      height: 48,
      width: 150,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(30),
      ),
      child: Text("按钮", style: TextStyle(color: Colors.white)),
    );
  }
}

         1.9 Container transform的使用

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        //配置Container容器内的方位
        width: 100,
        height: 100,
        // transform: Matrix4.translationValues(10, 0, 0),//位移
        // transform: Matrix4.rotationZ(1),//选择
        transform: Matrix4.skewY(3),//倾斜
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.red),
          //边框
          borderRadius: BorderRadius.circular(10),
          //配置圆角
          boxShadow: [
            //阴影
            BoxShadow(color: Colors.black, blurRadius: 2),
          ],
          gradient: LinearGradient(
            colors: [Colors.red, Colors.yellow],
          ), //背景颜色渐变 LinearGradient=线性渐变 RadialGradient= 径性渐变
        ),
        child: Text("你好", style: TextStyle(color: Colors.blue)),
      ),
    );
  }
}

2. Text组件详解

        2.1 TextStyle组件详解

        2.2 Text textAlign/maxLines/overflow 的使用

child: Text(
        "HowHowHowHowHowHowHowHowHowHowHowHowHowHowHowHow",
        textAlign: TextAlign.center,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      )

        2.2 Text 字符间距/倾斜字体的使用

  child: Text(
        "HowHowHowHowHowHowHowHowHowHowHowHowHowHowHowHow",
        textAlign: TextAlign.center,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
         style: TextStyle(
           fontSize: 20,
           fontWeight: FontWeight.w800,//字体大小
           color: Colors.red,
           fontStyle: FontStyle.italic,//倾斜字体
           letterSpacing: 7 //字符间距
         ),
      ),

        2.3 Text 底部下划线/底部虚线的使用

 child: Text(
        "HowHowHowHowHowHowHowHowHowHowHowHowHowHowHowHow",
        textAlign: TextAlign.center,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w800,
          //字体大小
          color: Colors.red,
          fontStyle: FontStyle.italic,
          //倾斜字体
          letterSpacing: 1,
          //字符间距
          decoration: TextDecoration.underline,
          decorationColor: Colors.black //底部下划线
          ,decorationStyle: TextDecorationStyle.dashed //底部虚线
        ),
      ),

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值