Flutter学习笔记02-Container组件、Text组件详解

参考学习视频：https://www.bilibili.com/video/BV1S4411E7LY?p=21&vd_source=cee744cae4ead27f8193fc7904647073

视频内容的学习笔记：
1.使用Container组件 👇

import 'package:flutter/material.dart';

void main() {
  //const : 多个相同的实例共享存储空间
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("你好flutter"),
      ),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(color: Colors.red),
      child: Text(
        "你好flutter",
        style: TextStyle(color: Colors.black, fontSize: 20),
      ),
    ));
  }
}

注意：Container组件是作为Center组件的child使用的，我们用它的decoration属性来修饰它，修饰的值是一个BoxDecoration(color: Colors.red)。下面我们专门设置一下这个BoxDecoration。

2.设置一下这个BoxDecoration 👇

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      alignment: Alignment.center,
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.red,
        border: Border.all(color: Colors.green, width: 2), //配置边框
        borderRadius: BorderRadius.circular(10), //配置圆角
        boxShadow: [
          BoxShadow(color: Colors.green, blurRadius: 10),
        ],
        //线性渐变lineargradient, 径向渐变RadialGradient
        gradient: LinearGradient(colors: [Colors.red, Colors.yellow]),
      ),
      child: Text(
        "你好flutter",
        style: TextStyle(color: Colors.black, fontSize: 20),
      ),
    ));
  }
}

我们设置了BoxDecoration的几个属性：
color-填充颜色
border-边界线
borderRadius-边界线弧度，设置圆角
boxShadow-设置阴影
gradient-设置渐变

3.使用container创建一个按钮 👇

class MyButton extends StatelessWidget {
  const MyButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        width: 200,
        height: 40,
        margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
        decoration: BoxDecoration(
            color: Colors.blue, borderRadius: BorderRadius.circular(10)),
        child: Text(
          "按钮",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ));
  }
}

4.Text组件属性也都用一用，这种属性不用背，多用几次就记住了 👇

class MyText extends StatelessWidget {
  const MyText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
      width: 200,
      height: 200,
      decoration: BoxDecoration(color: Colors.yellow),
      child: Text(
        "我是flutter我是flutter我是flutter我是flutter我是flutter",
        style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w900,
            fontStyle: FontStyle.italic,
            letterSpacing: 2,
            decoration: TextDecoration.underline,
            decorationStyle: TextDecorationStyle.dashed,
            decorationColor: Colors.blue),
        textAlign: TextAlign.left,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    );
  }
}

我们设置了Text的几个的属性
style-设置字体样式
fontSize-字号，就是设置字体大小的
fontWeight-自重，就是设置字体粗细的
fontStyle-样式，有normal和italic，就是直体和斜体的区别
letterSpacing-字符的间距
decoration: TextDecoration.underline-设置下划线
decorationStyle: TextDecorationStyle.dashed-设置下划线为虚线
decorationColor: Colors.blue-设置下划线颜色
textAlign-对齐方式
maxline-最大行数
overflow: TextOverflow.ellipsis - 溢出、显示省略号

总结👉 本节主要讲解了Container和Text组件的使用,没有难点，就是涉及到的属性比较多，不需要记下来，多敲几次熟悉了就可以了。