FLUTTER学习笔记--基础组件

---

一、Text

1.Text

• TextDirection（文本方向）

• TextStyle（文本样式）

  • colors（颜色）

  • FontWeit（字体粗细）

  • FontStyle（字体样式）

• TextAlign（文本对齐）

• TextOverflow（文本溢出）

• MaxLines（指定显示的行数）

2. RichText和TextSpan

作用：给一段文本声明多个不同的样式

3. 代码

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'abcdefgshdjsksandsndskdhshdaidisjda',
          maxLines: 3,
          overflow: TextOverflow.ellipsis,
          textDirection: TextDirection.ltr,
          textAlign: TextAlign.left,
          textScaleFactor: 1.5,
          style: TextStyle(
            color: Colors.red,
            fontSize: 30,
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.italic,
            decoration: TextDecoration.lineThrough,
            decorationColor: Colors.blue
          ),
        ),
        RichText(
            text: TextSpan(
              text: 'hello',
              style: TextStyle(
                fontSize: 40,
                color: Colors.red
              ),
              children: [
                TextSpan(
                  text: 'Flutter',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.blue
                  )
                )
              ]
            )
        )
      ],
    );
  }
}

4.效果

二、Icon

1.Icon

• Flutter中的图标库(需要一些魔法才能进去)

• Icon(Icons.具体名称)

2.代码

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(Icons.add),
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.home),
        ),
        Container(
          width: double.infinity,
          child: Image.asset(
            "images/1.png",
            fit: BoxFit.fitHeight,
          ),
        ),
      ],
    );
  }
}

4.效果

三、Color

1.color(自定义颜色)

• Flutter中通过ARGB来声明颜色

• const Color(0xFF42A5F5)//16进制的ARGB=透明度+六位十六进制颜色

• const Color.fromARGB(0xFF,0x42,0xA5,0xF5)

• const Color.fromARGB(255,66,165,245)

• const Color.fromRGBO(66,165,245,1.0)//O=Opacity

2.Colors（英文字母声明的颜色）

• Colors.blue

3.代码

class colorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RichText(
            text: TextSpan(
                text: 'hello',
                style: TextStyle(
                    color: Color.fromARGB(255, 0, 0, 255)
                ),
                children: [
                  TextSpan(
                      text: 'Flutter',
                      style: TextStyle(
                          color: Color.fromRGBO(255, 0, 0, 0.5)
                      )
                  ),
                  TextSpan(
                      text: 'Flutter',
                      style: TextStyle(
                          color: Color.fromARGB(0xFF, 0x00, 0xFF, 0x00)
                      )
                  )
                ]
            )
        )
      ],
    );
  }
}

4.效果

四、Container

1.Container

• child（声明子组件）

• padding/margin（填充）

  • EdgeInsets.（all(),fromLTRB(),only()）

• decoration

  • BoxDecoration(边框-border，圆角-borderRadius，渐变-gradient，阴影-boxShadow，背景色-color，背景图片-image等)

• alignment

  • Alignment（内容对齐）

• transform

  • Matrix4（平移-translate、选择-rotate、缩放-scale、斜切-skew）

2.代码

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        'abcdefgshdjsksandsndskdhshdaidisjdakhdasdhkdhhdihdhahdiajhdi',
        style: TextStyle(
            fontSize: 30,
        ),
      ),
      width: 200,
      height: 400,
      // width: double.infinity,
      // height: double.infinity,
      padding: EdgeInsets.all(10.0),
      margin: EdgeInsets.fromLTRB(10.0, 30.0, 0.0, 5.0),
      alignment: Alignment.center,
      //平移
      // transform: Matrix4.translationValues(1000, 0, 0),
      //旋转
      // transform: Matrix4.rotationZ(0.1),
      transform: Matrix4.skewX(0.2),
      decoration: BoxDecoration(
       // border: Border(
       //   top: BorderSide(
       //     width: 10.0,
       //     color: Colors.red
       //   ),
       //   bottom: BorderSide(
       //       width: 10.0,
       //       color: Colors.red
       //   ),
       //   right: BorderSide(
       //       width: 10.0,
       //       color: Colors.red
       //   ),
       //   left: BorderSide(
       //       width: 10.0,
       //       color: Colors.red
       //   ),
       // )
        border: Border.all(
          width: 10.0,
          color: Colors.red
        ),
        // borderRadius: BorderRadius.all(Radius.circular(30)),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30)
        ),
        color: Colors.lightGreen[100],
        //设置渐变后，背景色失效
        gradient: LinearGradient(colors: [Colors.lightBlue,Colors.white12]),
      ),
    );
  }
}

3.效果