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,
    );
  }
}