基础部件

Text文本

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

RichText富文本

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

flutter02 - 基础部件相关推荐

Tech Talk · 云技术有话聊 | 关键基础部件如何保障高可靠？
4月14日,信服云可靠性技术专家Marshall在信服云<Tech Talk · 云技术有话聊>系列直播课上进行了<关键基础部件可靠性技术解析>的分享,详细介绍了 IT系统常见 ...
（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像
RichText:行内多样式的文字 import 'package:flutter/material.dart';class BasicDemo extends StatelessWidget {@o ...
Flutter 入门指北(Part 2)之基础部件
该文已授权公众号「码个蛋」,转载请指明出处上一节介绍了 Dart 的一些语法,以及配置环境的网址,这节我们就可以开始了解下 Flutter 了主要包括 MaterialApp.Scaffold. ...
Flutter 入门指北之基础部件
作者:Kuky_xs 原文:https://www.jianshu.com/p/8ddb16902ce6 前言主要包括 MaterialApp.Scaffold.Text.Image.Icon.Bu ...
Flutter 四:基础部件
文章目录 1.Text:文字与文字样式 2.RichText:行内多样式的文字 3.Container:容器 4.BoxDecoration:装饰盒子 5.BoxDecoration:边框(borde ...
服务器BMC、BIOS、IPMI、UEFI技术解析
服务器BMC.BIOS.IPMI.UEFI技术解析以BIOS为核心的固件产业,是信创产业链的重要组成部分,可被誉为信创产业的"山海关".在计算机体系中,BIOS 有着比操作系统更 ...
2022-2028年中国工业4.0深度调研及投资前景预测报告（全卷）
[报告类型]产业研究 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版本报告介绍了工业4.0行业相关概述.中国工业4.0行业运行环境.分析了中国工业4 ...
从ACM班、百度到亚马逊，深度学习大牛李沐的开挂人生
"大神",是很多人对李沐的印象.作为一经推出便大受追捧的 MXNet 深度学习框架的主要贡献者之一,李沐功不可没.值得注意的是,这个由 DMLC(Distributed Mac ...
科大讯飞刷新纪录，机器阅读理解如何超越人类平均水平？ | 技术头条
点击上方↑↑↑蓝字关注我们~ 「2019 Python开发者日」明日开启,扫码咨询 ↑↑↑ 记者 | 琥珀出品 | AI科技大本营(公众号ID:rgznai100) 对于日常从事模型训练的研究人员来 ...
回顾与展望：大热的AutoML究竟是什么？ | 技术头条
点击上方↑↑↑蓝字关注我们~ 「2019 Python开发者日」全日程揭晓,请扫码咨询 ↑↑↑ 来源 | 第四范式编者按:AutoML(Automatic Machine Learning,自动机器 ...

flutter02 - 基础部件