flutter02 - 基础部件

基础部件

Text文本

class TextDemo extends StatelessWidget {
  final String _author = '李白';
  final String _title = '将进酒';

  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
  );

  @override
  Widget build(BuildContext context) {
    return Text(
      '$_title - $_author   君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。',
      textAlign: TextAlign.left,
      maxLines: 3,
      overflow: TextOverflow.ellipsis,
      style: _textStyle,
    );
  }
}

RichText富文本

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: "你好呀",
        style: TextStyle(
          color: Colors.red,
          fontSize: 34.0,
          fontStyle: FontStyle.italic, //斜体
          fontWeight: FontWeight.w100,
        ),
        children: [TextSpan(
          text: "我很好",
          style: TextStyle(
            fontSize: 12.0,
            color: Colors.blue,
          ),
        ),TextSpan(
          text: "我很好",
          style: TextStyle(
            fontSize: 10.0,
            color: Colors.purpleAccent,
          ),
        )],
      ),
    );
  }
}

Container容器

默认这个容器会尽可能的沾满整个页面

设置容器尺寸,需要放在Row或Column里面

Container只有一个孩子child:

child里面可以嵌套Row()

Row里面有children:[]属性

里面可以继续增添Container

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black12,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center, //设置居中
        children: <Widget>[
          Container(
            child: Icon(
              Icons.change_history,
              size: 30.0,
              color: Colors.purpleAccent,
            ),
            color: Colors.red,
            width: 90.0,
            height: 90.0,
            margin: EdgeInsets.all(90.0),
//            padding: EdgeInsets.only(left: 100, top: 120.0, right: 0.0, bottom: 0.0),
          ),
        ],
      ),
    );
  }
}

BoxDecoration装饰盒子

使用Container里面的decoration,并且传入BoxDecoration属性

color: Colors.amber,

边框border

border: Border.all(
                color: Colors.indigoAccent,
                width: 6.0,
                style: BorderStyle.solid,
              ),
/*              border: Border(
                  left: BorderSide(
                    color: Colors.indigoAccent,
                    width: 3.0,
                    style: BorderStyle.solid,
                  ),
                  top: BorderSide(
                    color: Colors.indigoAccent,
                    width: 3.0,
                    style: BorderStyle.solid,
                  ),
                  right: BorderSide(
                    color: Colors.indigoAccent,
                    width: 3.0,
                    style: BorderStyle.solid,
                  ),
                  bottom: BorderSide(
                    color: Colors.indigoAccent,
                    width: 3.0,
                    style: BorderStyle.solid,
                  )),*/

圆角borderRadius

//              borderRadius: BorderRadius.all(Radius.circular(10)), //给全部的角设置边缘弧度
//              borderRadius: BorderRadius.circular(18.0), //给全部的角设置边缘弧度
              borderRadius: BorderRadius.circular(18.0),

阴影boxShadow

              boxShadow: <BoxShadow>[
                BoxShadow(
                  offset: Offset(10.0, 5.0),//阴影的xy值
                  color: Color.fromRGBO(16, 20, 188, 0.8),//颜色和透明度
                  blurRadius: 10,//模糊度
                  spreadRadius: -2,//扩散
                ),
              ],

形状shape

 shape: BoxShape.circle, //使用这个不能使用圆角效果,因为这个本来就是圆角的

渐变

RadialGradient 径向渐变
LinearGradient 线性渐变

              gradient: LinearGradient(
                colors: [
                  Color.fromRGBO(222,102,255,1.0),
                  Color.fromRGBO(3,12,125,1.0),
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
              
              

              gradient: RadialGradient(
                colors: [
                  Color.fromRGBO(222,102,255,1.0),
                  Color.fromRGBO(3,12,125,1.0),
                ],
              ),

图像背景

在顶层的ColorFilter里面创建decoration: BoxDecoration(),用这个属性,不能用同级别color属性

decoration: BoxDecoration(
          image: DecorationImage(
//          image: AssetImage(), //使用项目里面的图像
            alignment: Alignment.topCenter, //设置居中方式为顶部居中
            repeat: ImageRepeat.repeatX, //设置重复模式为y轴重复
            colorFilter:ColorFilter.mode(Colors.indigoAccent[400].withOpacity(0.5), BlendMode.hardLight),//滤镜 第二个参数为过滤模式 为强光
            image: NetworkImage(
                r"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583413485756&di=5ed832cd1189db6a72ebd8e40a1084de&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F20%2F20150820112143_JMfN4.png"), //使用网络的图像
          )),

import 'package:flutter/material.dart';

class BasicDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//    return TextDemo();
//    return RichTextDemo();
//    return ContainerDemo();
    return Container(
//      color: Colors.black12,
      decoration: BoxDecoration(
          image: DecorationImage(
//          image: AssetImage(), //使用项目里面的图像
            alignment: Alignment.topCenter, //设置居中方式为顶部居中
            repeat: ImageRepeat.repeatX, //设置重复模式为y轴重复
            colorFilter:ColorFilter.mode(Colors.indigoAccent[400].withOpacity(0.5), BlendMode.hardLight),//滤镜 第二个参数为过滤模式 为强光
            image: NetworkImage(
                r"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583413485756&di=5ed832cd1189db6a72ebd8e40a1084de&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F20%2F20150820112143_JMfN4.png"), //使用网络的图像
          )),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center, //设置居中
        children: <Widget>[
          Container(
            child: Icon(
              Icons.change_history,
              size: 30.0,
              color: Colors.purpleAccent,
            ),
            width: 90.0,
            height: 90.0,
            margin: EdgeInsets.all(90.0),
//            padding: EdgeInsets.only(left: 100, top: 120.0, right: 0.0, bottom: 0.0),
            decoration: BoxDecoration(
              color: Colors.amber,
//              borderRadius: BorderRadius.all(Radius.circular(10)), //给全部的角设置边缘弧度
//              borderRadius: BorderRadius.circular(18.0), //给全部的角设置边缘弧度
//              borderRadius: BorderRadius.circular(18.0),
              shape: BoxShape.circle,
              //使用这个不能使用圆角效果,因为这个本来就是圆角的
/*              gradient: LinearGradient(
                colors: [
                  Color.fromRGBO(222,102,255,1.0),
                  Color.fromRGBO(3,12,125,1.0),
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),*/

              gradient: RadialGradient(
                colors: [
                  Color.fromRGBO(222, 102, 255, 1.0),
                  Color.fromRGBO(3, 12, 125, 1.0),
                ],
              ),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  offset: Offset(10.0, 5.0), //阴影的xy值
                  color: Color.fromRGBO(16, 20, 188, 0.8), //颜色和透明度
                  blurRadius: 10, //模糊度
                  spreadRadius: -2, //扩散
                ),
              ],
              border: Border.all(
                color: Colors.indigoAccent,
                width: 6.0,
                style: BorderStyle.solid,
              ),
/*              border: Border(
                  left: BorderSide(
                    color: Colors.indigoAccent,
                    width: 3.0,
                    style: BorderStyle.solid,
                  ),
                  top: BorderSide(
                    color: Colors.indigoAccent,
                    width: 3.0,
                    style: BorderStyle.solid,
                  ),
                  right: BorderSide(
                    color: Colors.indigoAccent,
                    width: 3.0,
                    style: BorderStyle.solid,
                  ),
                  bottom: BorderSide(
                    color: Colors.indigoAccent,
                    width: 3.0,
                    style: BorderStyle.solid,
                  )),*/
            ),
          ),
        ],
      ),
    );
  }
}



class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black12,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center, //设置居中
        children: <Widget>[
          Container(
            child: Icon(
              Icons.change_history,
              size: 30.0,
              color: Colors.purpleAccent,
            ),
            color: Colors.red,
            width: 90.0,
            height: 90.0,
            margin: EdgeInsets.all(90.0),
//            padding: EdgeInsets.only(left: 100, top: 120.0, right: 0.0, bottom: 0.0),
          ),
        ],
      ),
    );
  }
}

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: "你好呀",
        style: TextStyle(
          color: Colors.red,
          fontSize: 34.0,
          fontStyle: FontStyle.italic, //斜体
          fontWeight: FontWeight.w100,
        ),
        children: [
          TextSpan(
            text: "我很好",
            style: TextStyle(
              fontSize: 12.0,
              color: Colors.blue,
            ),
          ),
          TextSpan(
            text: "我很好",
            style: TextStyle(
              fontSize: 10.0,
              color: Colors.purpleAccent,
            ),
          )
        ],
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  final String _author = '李白';
  final String _title = '将进酒';

  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
  );

  @override
  Widget build(BuildContext context) {
    return Text(
      '$_title - $_author   君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。',
      textAlign: TextAlign.left,
      maxLines: 3,
      overflow: TextOverflow.ellipsis,
      style: _textStyle,
    );
  }
}