Flutter 四:基础部件

1.Text：文字与文字样式

import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
  final TextStyle _textStyle=TextStyle(
    fontSize:16.0,
  );
  final String _author='李白';
  final String _title='将进酒';
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text(
      '《$_title》——$_author。君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。',
      textAlign: TextAlign.left,//对齐方式
      style: _textStyle,//文字样式
      maxLines: 3,//最多三行
      overflow: TextOverflow.ellipsis,//多出来的用省略号代替
    );
  }
}

2.RichText：行内多样式的文字

import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RichText(
      text: TextSpan(
        text:'ninghao',
        style:TextStyle(
          color: Colors.deepPurpleAccent,
          fontSize: 34.0,
          fontStyle: FontStyle.italic,
          fontWeight: FontWeight.w100,
        ),
        children: [//子部件，其他样式
          TextSpan(
            text: '.net',
            style: TextStyle(
              fontSize:17.0,
              color:Colors.grey,
            ),
          )
        ]
      )
    );
  }
}

3.Container：容器

import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(//容器
      color:Colors.grey[100],
      child:Row(//Row小部件可以放一些水平放置的部件
      children:<Widget>[
        Container(
          child:Icon(Icons.pool,size:32.0,color:Colors.white),
          color: Color.fromRGBO(3, 54, 255, 1.0),
          padding: EdgeInsets.all(16.0),//内边距
          margin: EdgeInsets.all(8.0),//外边距
          width:90.0,
          height: 90.0,

        )
      ]

      )
    );
  }
}

4.BoxDecoration：装饰盒子

出现这个错，是因为重复添加了color

import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(//容器
      color:Colors.grey[100],
      child:Row(//Row小部件可以放一些水平放置的部件
      mainAxisAlignment: MainAxisAlignment.center,//主轴对齐，居中
      children:<Widget>[
        Container(
          child:Icon(Icons.pool,size:32.0,color:Colors.white),
          //color: Color.fromRGBO(3, 54, 255, 1.0),
          padding: EdgeInsets.all(16.0),//内边距
          margin: EdgeInsets.all(8.0),//外边距
          width:90.0,
          height: 90.0,
          decoration: BoxDecoration(//装饰盒子
            color:Color.fromRGBO(3, 54, 255, 1.0),
          ),
        )
      ]

      )
    );
  }
}

5.BoxDecoration：边框（border）

上下添加边框：

decoration: BoxDecoration(//装饰盒子
            color:Color.fromRGBO(3, 54, 255, 1.0),
            border: Border(
              top:BorderSide(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),
              bottom:BorderSide(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),
            )
          ),

周围都添加边框：

border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),

6.圆角效果

borderRadius: BorderRadius.circular(16.0),//圆角效果,圆形的盒子不能有圆角效果

单独设置：

borderRadius: BorderRadius.only(
              topLeft:Radius.circular(64.0),//左上角
              bottomLeft:Radius.circular(64.0),//左下角
            )//圆角效果,圆形的盒子不能有圆角效果

decoration: BoxDecoration(//装饰盒子
            color:Color.fromRGBO(3, 54, 255, 1.0),
            border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),//边框效果
            borderRadius: BorderRadius.only(
              topLeft:Radius.circular(64.0),//左上角
              bottomLeft:Radius.circular(64.0),//左下角
            )//圆角效果
          ),

7.BoxDecoration：阴影（borderShadow）

boxShadow: [
              BoxShadow(
              offset:Offset(0.0,7.0),//阴影偏移,x,y
              color: Color.fromRGBO(16,20, 188, 1.0),//颜色，默认黑色
              blurRadius: 20.0,//值越大，模糊程度越明显
              spreadRadius: -3.0,//控制阴影的扩撒程度，为正就会扩大，为负就会缩小
              ),   
            ]

8.BoxDecoration：形状（shape）

圆角效果,圆形的盒子不能有圆角效果

shape: BoxShape.circle,

9. BoxDecoration：渐变（gradient）

gradient: RadialGradient(//镜像渐变
              colors: [
                Color.fromRGBO(7, 102, 255, 1.0),
                Color.fromRGBO(3, 28, 128, 1.0),
              ],
            ),

gradient: LinearGradient(//RadialGradient镜像渐变,LinearGradient线性渐变，默认从左到右
              colors: [
                Color.fromRGBO(7, 102, 255, 1.0),
                Color.fromRGBO(3, 28, 128, 1.0),
              ],
              begin: Alignment.topCenter,//可设置渐变方向
              end: Alignment.bottomCenter,
            ),

10.BoxDecoration：背景图像（image）

decoration: BoxDecoration(//设置背景图片
        image:DecorationImage(
          image:NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
          alignment:Alignment.topCenter,
          //repeat: ImageRepeat.repeatY,//延Y轴重复
          fit:BoxFit.cover,//填充方式，填满
          colorFilter:ColorFilter.mode(//加滤镜
            Colors.indigoAccent[400].withOpacity(0.5),
            BlendMode.hardLight,
          ),
        )
      ),

完整dart

import 'package:flutter/material.dart';
class BaseDemo extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(//容器
      //color:Colors.grey[100],
      decoration: BoxDecoration(//设置背景图片
        image:DecorationImage(
          image:NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
          alignment:Alignment.topCenter,
          //repeat: ImageRepeat.repeatY,//延Y轴重复
          fit:BoxFit.cover,//填充方式，填满
          colorFilter:ColorFilter.mode(//加滤镜
            Colors.indigoAccent[400].withOpacity(0.5),
            BlendMode.hardLight,
          ),
        )
      ),
      child:Row(//Row小部件可以放一些水平放置的部件
      mainAxisAlignment: MainAxisAlignment.center,//主轴对齐，居中
      children:<Widget>[
        Container(
          child:Icon(Icons.pool,size:32.0,color:Colors.white),
          //color: Color.fromRGBO(3, 54, 255, 1.0),
          padding: EdgeInsets.all(16.0),//内边距
          margin: EdgeInsets.all(8.0),//外边距
          width:90.0,
          height: 90.0,
          decoration: BoxDecoration(//装饰盒子
            color:Color.fromRGBO(3, 54, 255, 1.0),
            border: Border.all(color: Colors.indigoAccent[100],width: 3.0,style: BorderStyle.solid),//边框效果
            //borderRadius: BorderRadius.circular(16.0),//圆角效果,圆形的盒子不能有圆角效果
            boxShadow: [
              BoxShadow(
              offset:Offset(0.0,7.0),//阴影偏移,x,y
              color: Color.fromRGBO(16,20, 188, 1.0),//颜色，默认黑色
              blurRadius: 20.0,//值越大，模糊程度越明显
              spreadRadius: -3.0,//控制阴影的扩撒程度，为正就会扩大，为负就会缩小
              ),   
            ],
            shape: BoxShape.circle,
            gradient: LinearGradient(//RadialGradient镜像渐变,LinearGradient线性渐变，默认从左到右
              colors: [
                Color.fromRGBO(7, 102, 255, 1.0),
                Color.fromRGBO(3, 28, 128, 1.0),
              ],
              begin: Alignment.topCenter,//可设置渐变方向
              end: Alignment.bottomCenter,
            ),
          ),
        )
      ]

      )
    );
  }
}