Flutter 02 基础组件 Container、Text、Image、Icon、ListView

一、Container容器组件：

demo1：

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),));
}// 容器组件
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,height: 200,width: 200,decoration: const BoxDecoration(color: Colors.yellow,),child: const Text("你好Flutter",style: TextStyle(fontSize: 20),),),);}
}

demo2：

//代码块 importM
import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),));
}// 代码块  statelessW
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,height: 200,width: 200,decoration:  BoxDecoration(color: Colors.yellow,gradient: const LinearGradient(//LinearGradient 背景线性渐变   RadialGradient径向渐变colors: [Colors.red, Colors.orange],),boxShadow:const [//卡片阴影BoxShadow(color: Colors.blue,offset: Offset(2.0, 2.0),blurRadius: 10.0,)],border: Border.all(color: Colors.black,width: 1)),transform:Matrix4.rotationZ(0.2),child: const Text("你好Flutter",style: TextStyle(fontSize: 20),),),);}
}

demo3：

//代码块 importM
import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),));
}// 代码块  statelessW
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(// child: Container(//   margin: EdgeInsets.all(20.0), //容器外补白//   color: Colors.orange,//   child: Text("Hello world !"),// ),// child: Container(//   padding: EdgeInsets.all(20.0), //容器内补白//   color: Colors.orange,//   child: Text("Hello world !"),// ),child: Container(alignment: Alignment.center,height: 40,width: 200,decoration:  BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(15)),child: const Text("按钮",style: TextStyle(fontSize: 20),),),);}
}

二、Text组件详解：

demo1：

//代码块 importM
import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),));
}// 代码块  statelessW
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,height: 200,width: 200,decoration: BoxDecoration(color: Colors.yellow,gradient: const LinearGradient(//LinearGradient 背景线性渐变   RadialGradient径向渐变colors: [Colors.red, Colors.orange],),boxShadow: const [//卡片阴影BoxShadow(color: Colors.blue,offset: Offset(2.0, 2.0),blurRadius: 10.0,)],border: Border.all(color: Colors.black, width: 1)),transform: Matrix4.rotationZ(.2),child: const Text('各位同学大家好',textAlign: TextAlign.left,overflow: TextOverflow.ellipsis,// overflow:TextOverflow.fade ,maxLines: 2,textScaleFactor: 1.8,style: TextStyle(fontSize: 16.0,color: Colors.black,// color:Color.fromARGB(a, r, g, b)fontWeight: FontWeight.w800,fontStyle: FontStyle.italic,decoration: TextDecoration.lineThrough,decorationColor: Colors.white,decorationStyle: TextDecorationStyle.dashed,letterSpacing: 5.0)),),);}
}

 三、Image图片组件详解：

1、加载本地图片：

1）项目根目录新建images文件夹，images中新建2.x 3.x对应的文件

2）然后，打开pubspec.yaml 声明一下添加的图片文件，注意：空格

3）使用本地图片：

import 'package:flutter/material.dart';//本地图片
void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),));
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Image.asset("images/2.jpg",width: 150.0,height: 150.0,fit: BoxFit.cover),);}
}

2、加载远程图片：

import 'package:flutter/material.dart';//图片路径 https://pics6.baidu.com/feed/43a7d933c895d1431790def92fe644055baf0727.jpeg@f_auto?token=18bdda8ca14969d4351c53a482c2b2ca&s=5BB105C154B1499472A1215B03001013
//远程图片
void main(){runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp()),));
}
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Image.network("https://pics2.baidu.com/feed/b7003af33a87e9502b64d86f4c2e9544fbf2b45b.jpeg@f_auto?token=8c6557279177a75d44029840f0db0daa&s=C8AA67D91C0090457095310903005057",// "https://pics6.baidu.com/feed/43a7d933c895d1431790def92fe644055baf0727.jpeg@f_auto?token=18bdda8ca14969d4351c53a482c2b2ca&s=5BB105C154B1499472A1215B03001013",width: 150.0,height: 150.0,fit: BoxFit.cover),);}
}

3、加载圆形图片：

1）Container实现圆形图片；

2）ClipOval实现圆形图片；

3）CircleAvatar实现圆形图片。

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),// body: const MyApp()// body: const MyApp2()body: const MyApp3()),));
}const String URL = "https://pics2.baidu.com/feed/b7003af33a87e9502b64d86f4c2e9544fbf2b45b.jpeg@f_auto?token=8c6557279177a75d44029840f0db0daa&s=C8AA67D91C0090457095310903005057";//Container实现圆形图片
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Container(width: 150,height: 150,decoration: BoxDecoration(color: Colors.yellow,borderRadius: BorderRadius.circular(75),image: const DecorationImage(image: NetworkImage(URL),fit: BoxFit.cover)),),);}
}//ClipOval实现圆形图片
class MyApp2 extends StatelessWidget {const MyApp2({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: ClipOval(child: Image.network(URL,width: 150.0,height: 150.0,fit: BoxFit.cover),),);}
}
//CircleAvatar实现圆形图片
class MyApp3 extends StatelessWidget {const MyApp3({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const CircleAvatar(radius: 110,backgroundColor: Color(0xffFDCF09),child: CircleAvatar(radius: 100,backgroundImage:NetworkImage(URL),));}
}

四、Icon图标组件：

1、使用Flutter官方lcons图标：

Material Design所有图标可以在其官网查看：——https://material. io/tools/icons/


import 'package:flutter/material.dart';//使用Flutter官方Icons图标
//图标库：https://material.io/tools/icons/
void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),));
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Column(children: const [Icon(Icons.search,color: Colors.red),Icon(Icons.home,color: Colors.cyan),Icon(Icons.category),Icon(Icons.shop),]));}
}

2、Flutter中借助阿里巴巴图标库自定义字体图标 ：

1）我们也可以使用自定义字体图标。阿里巴巴图标库官网iconfont.cn上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。

2）假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：

3）也可以在pubspec.yaml配置多个字体文件：

4）为了使用方便，我们定义一个Mylcons类，功能和lcons类一样：将字体文件中的所有图标都定义成静态变量：

import 'package:flutter/material.dart';class MyIcons{// 设置图标static const IconData set = IconData(0xe601,fontFamily: 'myIcon',matchTextDirection: true);
}

5）使用：


import 'package:flutter/material.dart';
import 'package:flutter_chaper_01/src/asset/font.dart';//使用阿里图标库支持
//图标库：https://material.io/tools/icons/
void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const MyApp(),),));
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Column(children: const [Icon(MyIcons.set,color: Colors.red),Icon(Icons.home,color: Colors.cyan),Icon(Icons.category),Icon(Icons.shop),]));}
}

五、ListView列表组件：

1、垂直列表demo：

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),// body: const VerticalList(),// body: const VerticalIconList(),body: const VerticalPicList(),),));
}//垂直列表
class VerticalList extends StatelessWidget {const VerticalList({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return ListView(children: const <Widget>[ListTile(title: Text("我是一个标题"),),ListTile(title: Text("我是一个标题"),),ListTile(title: Text("我是一个标题"),),ListTile(title: Text("我是一个标题"),),ListTile(title: Text("我是一个标题"),),ListTile(title: Text("我是一个标题"),),ListTile(title: Text("我是一个标题"),),],);}
}//垂直图标列表
class VerticalIconList extends StatelessWidget {const VerticalIconList({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return ListView(children: const <Widget>[ListTile(leading: Icon(Icons.assignment, color: Colors.red),title: Text("全部订单"),),Divider(),ListTile(leading: Icon(Icons.payment, color: Colors.green),title: Text("待付款"),),Divider(),ListTile(leading: Icon(Icons.local_car_wash, color: Colors.orange),title: Text("待收货"),),ListTile(leading: Icon(Icons.favorite, color: Colors.lightGreen),title: Text("我的收藏"),),Divider(),ListTile(leading: Icon(Icons.people, color: Colors.black54),title: Text("在线客服"),),Divider(),],);}
}//垂直图文列表
class VerticalPicList extends StatelessWidget {const VerticalPicList({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return ListView(children: <Widget>[ListTile(leading: Image.asset("images/1.png"),title: const Text('华北黄淮高温雨今起强势登场'),subtitle: const Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),),const Divider(),ListTile(leading: Image.asset("images/2.png"),title: const Text('保监局50天开32罚单 “断供”违规资金为房市降温'),subtitle: const Text("中国天气网讯 保监局50天开32罚单 “断供”违规资金为房市降",),),const Divider(),ListTile(title: const Text('华北黄淮高温雨今起强势登场'),subtitle: const Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),trailing: Image.asset("images/3.png")),const Divider(),ListTile(leading: Image.asset("images/4.png"),title: const Text('普京现身俄海军节阅兵：乘艇检阅军舰'),),const Divider(),ListTile(leading: Image.asset("images/5.png"),title: const Text('鸿星尔克捐1个亿帮助困难残疾群体 网友：企业有担当'),),const Divider(),ListTile(leading: Image.asset("images/6.png"),title: const Text('行业冥灯？老罗最好祈祷苹果的AR能成'),),],);}
}

2、水平列表，可以左右滑动demo：

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("你好Flutter")),body: const HorizontalList(),),));
}class HorizontalList extends StatelessWidget {const HorizontalList({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return SizedBox(height: 180,child: ListView(scrollDirection: Axis.horizontal,children: <Widget>[Container(width: 180.0,color: Colors.red,),Container(width: 180.0,color: Colors.orange,child: Column(children: <Widget>[Image.asset("images/1.png"),const Text('我是一个文本')],),),Container(width: 180.0,color: Colors.blue,),Container(width: 180.0,color: Colors.deepOrange,),Container(width: 180.0,color: Colors.deepPurpleAccent,),],),);}
}

3、ListView动态列表组件，以及循环动态数据demo：

import 'package:flutter/material.dart';//列表数据动态化
void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application. @override@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(primarySwatch: Colors.yellow,),home: Scaffold(appBar: AppBar(title: const Text("Flutter ICON")),body: const MyHomePage(),),);}
}class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);List<Widget> _initListView() {List<Widget> list = [];for (var i = 0; i < 100; i++) {list.add(const ListTile(title: Text("我是一个列表"),));}return list;}@overrideWidget build(BuildContext context) {return ListView(children: _initListView(),);}
}class MyHomePage2 extends StatelessWidget {List list = [];MyHomePage2({Key? key}) : super(key: key) {for (var i = 0; i < 10; i++) {list.add("我是一个列表--$i");}}@overrideWidget build(BuildContext context) {return ListView.builder(itemCount: list.length,itemBuilder: (context, index) {return ListTile(title: Text("${list[index]}"),);});}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/157077.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

树形结构数据展示及返回上一级

树形结构数据展示及返回上一级

11月1日&#xff0c;又是搬砖的一天&#xff0c;让我们红尘作伴&#xff0c;活的潇潇洒洒。。。。。。 html <template><view class"content"><view><input class"sreachTool" v-model"toolValue"/><van-icon name…
阅读更多...
gRPC之grpcui界面工具

gRPC之grpcui界面工具

1、grpcui界面工具 简单的说&#xff0c;就是gRPC中的postman&#xff0c;grpcui官方地址&#xff1a;https://github.com/fullstorydev/grpcui。 1.1 安装 go get -u github.com/fullstorydev/grpcui go install github.com/fullstorydev/grpcui/cmd/grpcuiv1.2.0[rootzsx …
阅读更多...
React Hooks的使用

React Hooks的使用

目录 1.React Hooks使用注意事项 1.useState Hook&#xff1a; 2.useEffect Hook&#xff1a; 3.其他常用Hooks&#xff1a; 2.使用React Hooks需要遵循 1.安装React&#xff1a; 2.导入所需的Hooks&#xff1a; 3.使用Hooks创建组件&#xff1a; 4.在应用中使用组件&…
阅读更多...
Redis入门指南学习笔记(1)：初识Redis

Redis入门指南学习笔记(1)：初识Redis

一.什么是Redis? Redis全称为Remote Dictionary Server&#xff0c;即远程字典服务器&#xff0c;它采用字典结构来存储数据&#xff0c;并允许其他应用通过TCP协议来访问数据。 字典在众多开发语言中都很常见&#xff0c;其形式为键值对&#xff0c;根据键可以获取相应的值…
阅读更多...
CHS零壹视频恢复程序监控版/海康版/大华版深入扫描功能演示

CHS零壹视频恢复程序监控版/海康版/大华版深入扫描功能演示

安防文件系统是一种嵌入式文件系统&#xff0c;一般情况下监控版程序扫描会基于文件系统进行扫描&#xff0c;如果想更深入的扫描一些数据建议开启深入扫描功能&#xff0c;具体方法如下: 适用版本:监控版/海康版/大华版/专业版/高级版 作用&#xff1a;舍弃嵌入式文件系统直…
阅读更多...
利用两个栈s1，s2模拟一个队列时，如何用栈的运算来实现该队列的运算？写出模拟队列插入和删除的函数。一个栈s1用于插入元素，另一个栈s2用于删除元素

利用两个栈s1，s2模拟一个队列时，如何用栈的运算来实现该队列的运算？写出模拟队列插入和删除的函数。一个栈s1用于插入元素，另一个栈s2用于删除元素

利用两个栈s1&#xff0c;s2模拟一个队列时&#xff0c;如何用栈的运算来实现该队列的运算&#xff1f;写出模拟队列插入和删除的函数。一个栈s1用于插入元素&#xff0c;另一个栈s2用于删除元素。 前置知识点&#xff08;栈定义&#xff0c;及出栈入栈函数&#xff09; #def…
阅读更多...
GORM：在Go中轻松管理数据库

GORM：在Go中轻松管理数据库

GORM综合介绍 - Go对象关系映射库 在现代软件开发中&#xff0c;高效的数据库管理对于构建强大的应用程序至关重要。GORM是Go开发人员寻求与数据库进行交互的简化方式的宝贵工具。GORM是Go对象关系映射的缩写&#xff0c;它为Go的面向对象世界与数据库的关系世界之间提供了桥梁…
阅读更多...
2.2 - 网络协议 - IP协议，IP地址划分，报文格式，数据分片，抓包实战

2.2 - 网络协议 - IP协议，IP地址划分，报文格式，数据分片，抓包实战

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 IP协议 1、IP地址划分2、IP协议报文格式3、IP协议数…
阅读更多...
设计模式（22）享元模式

设计模式（22）享元模式

一、介绍&#xff1a; 1、定义&#xff1a;享元模式&#xff08;Flyweight Pattern&#xff09;主要用于减少创建对象的数量&#xff0c;以减少内存占用和提高性能。这种类型的设计模式属于结构型模式&#xff0c;它提供了减少对象数量从而改善应用所需的对象结构的方式。 2、…
阅读更多...
Windows下多Chrome谷歌浏览器版本共存

Windows下多Chrome谷歌浏览器版本共存

场景 某些年代久远的 WEB 应用&#xff0c;必须在指定的浏览器或版本才能正常运行&#x1f602;&#xff0c;此时就需要多个版本 chrome 浏览器共存。 解决方案 下载指定版本 可以从 https://www.chromedownloads.net/ 下载需要的版本&#xff0c;此处下载的是87.0.4280.14…
阅读更多...
【Servlet】 一

【Servlet】 一

本文主要介绍了如何在tomcat部署一个webapp 以及 如何借助maven用servlet编写一个hello world . 一.Tomcat Tomcat是一个Java里广泛使用的http服务器 HTTP服务器有很多实现&#xff0c;其中最知名的是Nginx&#xff1b;而在Java里&#xff0c;最知名的是Tomcat 一个Tomcat服务…
阅读更多...
快速入手maven

快速入手maven

文章目录 Maven介绍Maven安装和配置基于IDEA的Maven工程创建梳理Maven工程GAVP属性Idea构建Maven JavaSE工程Idea构建Maven JavaEE工程1. 手动创建2. 插件方式创建 Maven工程项目结构说明Maven核心功能依赖和构建管理依赖传递和冲突依赖导入失败场景和解决方案扩展构建管理和插…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023