Flutter_学习记录_基本组件的使用记录

devtools/2025/1/24 6:11:16/

1.TextWidge的常用属性

1.1TextAlign: 文本对齐属性

常用的样式有：

  • TextAlign.center 居中
  • TextAlign.left 左对齐
  • TextAlign.right 有对齐

使用案例：

body: Center(child: Text('开启 TextWidget 的旅程吧，珠珠, 开启 TextWidget 的旅程吧，珠珠开启 TextWidget 的旅程吧，珠珠开启 TextWidget 的旅程吧，珠珠',textAlign: TextAlign.center),)

1.2 maxLines: 文本显示的最大行数

使用案例：

body: Center(child: Text('开启 TextWidget 的旅程吧，珠珠, 开启 TextWidget 的旅程吧，珠珠开启 TextWidget 的旅程吧，珠珠开启 TextWidget 的旅程吧，珠珠',textAlign: TextAlign.center,maxLines: 2)

1.3 overFlow: 控制文本的溢出效果

常用的样式有：

  • TextOverflow.clip 直接截断
  • TextOverflow.ellipsis 被截断后，末尾处用… 来表示
  • TextOverflow.fade 最后一行有个阴影

使用案例：

body: Center(child: Text('开启 TextWidget 的旅程吧，珠珠, 开启 TextWidget 的旅程吧，珠珠开启 TextWidget 的旅程吧，珠珠开启 TextWidget 的旅程吧，珠珠',textAlign: TextAlign.center,maxLines: 2,overflow: TextOverflow.ellipsis),)

1.4 style 样式

style 给文本添加样式，需要用到组件TextStyle， 查看TextStyle 的定义如下：

 const TextStyle({this.inherit = true,this.color,this.backgroundColor,this.fontSize,this.fontWeight,this.fontStyle,this.letterSpacing,this.wordSpacing,this.textBaseline,this.height,this.leadingDistribution,this.locale,this.foreground,this.background,this.shadows,this.fontFeatures,this.fontVariations,this.decoration,this.decorationColor,this.decorationStyle,this.decorationThickness,this.debugLabel,String? fontFamily,List<String>? fontFamilyFallback,String? package,this.overflow,}

使用案例：

body: Center(child: Text('开启 TextWidget 的旅程吧，珠珠',textAlign: TextAlign.center,style: TextStyle(fontSize: 25.0,color: Color.fromARGB(255, 255, 150, 150),decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid),),)

2. Container 容器组件

2.1 Alignment 属性的使用

常用样式：

/// The top left corner.
static const Alignment topLeft = Alignment(-1.0, -1.0);
/// The center point along the top edge.
static const Alignment topCenter = Alignment(0.0, -1.0);
/// The top right corner.
static const Alignment topRight = Alignment(1.0, -1.0);
/// The center point along the left edge.
static const Alignment centerLeft = Alignment(-1.0, 0.0);
/// The center point, both horizontally and vertically.
static const Alignment center = Alignment(0.0, 0.0);
/// The center point along the right edge.
static const Alignment centerRight = Alignment(1.0, 0.0);
/// The bottom left corner.
static const Alignment bottomLeft = Alignment(-1.0, 1.0);
/// The center point along the bottom edge.
static const Alignment bottomCenter = Alignment(0.0, 1.0);
/// The bottom right corner.
static const Alignment bottomRight = Alignment(1.0, 1.0);

2.2 设置宽高和颜色

高: height
宽：width
背景色：color

2.3 Padding 内边距属性的使用

两种设置方式：

  • EdgeInsets.all(xx) 上下左右的内边距统一设置
  • EdgeInsets.fromLTRB(left, top, right, bottom) 上下左右单独设置

2.4 margin外边距属性的使用

两种设置方式：

  • EdgeInsets.all(xx) 上下左右的内边距统一设置
  • EdgeInsets.fromLTRB(left, top, right, bottom) 上下左右单独设置

2.5 decoration 属性制作彩色背景

需要使用组件BoxDecoration 来设置

decoration: BoxDecoration(gradient: const LinearGradient(colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]))

2.5 使用案例

body: Center(child: Container(alignment: Alignment.topLeft,width: 500.0,height: 300.0,// color: Colors.lightBlue,padding: const EdgeInsets.fromLTRB(50, 20, 10, 30), // 上下左右边距都一样的margin: const EdgeInsets.all(10.0),decoration: BoxDecoration(gradient: const LinearGradient(colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple])),child: Text('开启 TextWidget 的旅程吧，珠珠',textAlign: TextAlign.left,style: TextStyle(fontSize: 45.0,color: Color.fromARGB(255, 255, 150, 150),decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid),),),)

3. Image图片组件的使用

3.1 Image Widget的集中加入形式

  1. Image.asset： 加载资源图片，会使打包时包体积过大
  2. Image.network: 网络资源图片，经常换的或者动态图片
  3. Image.file: 本地图片，比如相机照相后的图片预览

3.2 Fit 属性的使用

Fit 属性是说图片平铺的效果设置，用BoxFit组件来设置，主要有这几种样式：

  1. BoxFit.fill: 填充整个图片视图
    在这里插入图片描述

  2. BoxFit.contain ：根据图片的比例完全展示在视图上，不会被裁剪。
    在这里插入图片描述

  3. BoxFit.cover: 根据图片的比例，填充这个视图，会被裁剪。
    在这里插入图片描述

  4. BoxFit.fitWidth 根据图片的宽度自适应视图
    在这里插入图片描述

  5. BoxFit.fitHeight 根据图片的高度，自适应视图
    在这里插入图片描述

3.3 图片背景色

  1. color: 设置背景色
  2. colorBlendMode: 混合模式， 用BlendMode组件来实现

代码案例：

child: Image.network('https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1129%2F27ab50dfj00snowf20035d200u000tug008t008r.jpg&thumbnail=660x2147483647&quality=80&type=jpg',scale: 2.0,fit: BoxFit.fitHeight,color: Colors.greenAccent,colorBlendMode: BlendMode.difference,)

3.4repeat属性的使用

需要使用ImageRepeat组件来实现，常用的模式有：

  1. ImageRepeat.repeat
  2. ImageRepeat.repeatX
  3. ImageRepeat.repeatY

4. ListView 的初级使用

4.1 竖向列表的使用

代码案例1：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter 的demo',home: Scaffold(appBar: AppBar(title: Text('ListView Widget'),),body: ListView(children: <Widget>[ListTile(leading: Icon(Icons.accessible_forward_outlined),title: Text('标题提标题'),),ListTile(leading: Icon(Icons.accessibility_new_outlined),title: Text('标题提标题'),),ListTile(leading: Icon(Icons.access_alarm),title: Text('标题提标题'),),],),),);}
}

代码案例2：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter 的demo',home: Scaffold(appBar: AppBar(title: Text('ListView Widget'),),body: ListView(children: <Widget>[Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg'),Image.network('https://img1.baidu.com/it/u=1368815763,3761060632&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=434'),Image.network('https://i-blog.csdnimg.cn/blog_migrate/41635df939e6dd13c6d5e2af785d358b.jpeg'),Image.network('https://img2.baidu.com/it/u=2848534206,1976619941&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=896'),],),),);}
}

效果图：
在这里插入图片描述

4.2 横向列表的使用

用scrollDirection这个属性来设置列表滚动的方向：

  1. Axis.horizontal 横向滚动
  2. Axis.vertical 纵向滚动

4.3 动态列表的使用

代码案例：

import 'package:flutter/material.dart';void main() {runApp(MyApp(items: List<String>.generate(100,(i) => 'Heading $i')),);
}class MyApp extends StatelessWidget {final List<String> items;const MyApp({super.key, required this.items});@overrideWidget build(BuildContext context) {final itemList = items; // 如果items为null，则使用默认值return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Example App')),body: ListView.builder(itemCount: itemList.length,itemBuilder: (context, index) {return ListTile(title: Text(itemList[index]));},),),);}
}

5. 网络布局的使用

主要用GridView组件来实现，GridView提供了几种创建方式：

  1. GridView()
  2. GridView.builder()
  3. GridView.custom()
  4. GridView.count()

常用的属性有：

crossAxisCount: 3, 每一行展示几个item
mainAxisSpacing: 2.0, 上下的间距
crossAxisSpacing: 2.0, 左右的间距
childAspectRatio: 0.75 长和宽的比，用来设置每个子视图的大小

代码使用案例：

import 'package:flutter/material.dart';void main() {runApp(FilmExample());
}class FilmExample extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "电影海报实例",home: Scaffold(appBar: AppBar(title: Text("电影海报实例"),),body: GridViewDelegateTest(),));}
}// GridViewDelegate 的使用案例
class GridViewDelegateTest extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,  // 每一行展示几个itemmainAxisSpacing: 2.0,  // 上下的间距crossAxisSpacing: 2.0, // 左右的间距childAspectRatio: 0.75 // 长宽比),children: [Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg', fit: BoxFit.cover),Image.network('https://img1.baidu.com/it/u=1368815763,3761060632&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=434', fit: BoxFit.cover),Image.network('https://i-blog.csdnimg.cn/blog_migrate/41635df939e6dd13c6d5e2af785d358b.jpeg', fit: BoxFit.cover),Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg', fit: BoxFit.cover),Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg', fit: BoxFit.cover),Image.network('https://img1.baidu.com/it/u=1368815763,3761060632&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=434', fit: BoxFit.cover),Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg', fit: BoxFit.cover),Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg', fit: BoxFit.cover),Image.network('https://img2.baidu.com/it/u=2848534206,1976619941&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=896', fit: BoxFit.cover),Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg', fit: BoxFit.cover),Image.network('https://img1.baidu.com/it/u=1368815763,3761060632&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=43', fit: BoxFit.cover),Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg', fit: BoxFit.cover),Image.network('https://img2.baidu.com/it/u=2848534206,1976619941&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=896', fit: BoxFit.cover),Image.network('https://i-blog.csdnimg.cn/blog_migrate/41635df939e6dd13c6d5e2af785d358b.jpeg', fit: BoxFit.cover),Image.network('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg', fit: BoxFit.cover),Image.network('https://img2.baidu.com/it/u=2848534206,1976619941&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=896', fit: BoxFit.cover),Image.network('https://i-blog.csdnimg.cn/blog_migrate/41635df939e6dd13c6d5e2af785d358b.jpeg', fit: BoxFit.cover),],);}
}

效果图:
在这里插入图片描述

6. 水平方向的布局案例

水平方向布局的设置，用Row的组件来设置，其中有个小知识点：Expanded组件，是填充组件：

如果设置了3个Expanded，表示将三个视图将屏幕的宽度3等份平铺。
如果三个视图中，中间的视图用Expanded包裹着，那第一个和第三个视图按照自身的大小展示，第二个视图填充剩余的宽度。

代码案例：

import 'package:flutter/material.dart';void main() {runApp(MyExampleApp());
}class MyExampleApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "布局RowWidge",home: Scaffold(appBar: AppBar(title: Text("布局RowWidge案例"),),body: Row(children: [Expanded(child: ElevatedButton(onPressed: (){},style: ElevatedButton.styleFrom(foregroundColor: Colors.white,backgroundColor: Colors.redAccent, // foreground (text) color),child: Text("红色按钮"))),Expanded(child: ElevatedButton(onPressed: (){},style: ElevatedButton.styleFrom(foregroundColor: Colors.white,backgroundColor: Colors.orangeAccent, // foreground (text) color),child: Text("橙色按钮"))),Expanded(child: ElevatedButton(onPressed: (){},style: ElevatedButton.styleFrom(foregroundColor: Colors.white,backgroundColor: Colors.blueAccent, // foreground (text) color),child: Text("蓝色按钮"))),],),),);}
}

7. 垂直方向的布局案例

用Column组件来实现垂直方向的布局，代码案例：

import 'package:flutter/material.dart';void main() {runApp(MyExampleApp());
}// ---布局ColumnWidge的案例---
class MyExampleApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: "垂直方向布局案例",home: Scaffold(appBar: AppBar(title: Text("垂直方向布局案例"),),body: Column(mainAxisAlignment: MainAxisAlignment.center,  // 主轴对齐方式：垂直的crossAxisAlignment: CrossAxisAlignment.center,  // 副轴对齐方式：左右的children: [Text('111111'),Expanded(child: Text('222222')),Text('333333333333')],),),);}
}

8. 层叠布局案例

8.1 只有两个视图的stack的使用方法

用Stack组件来实现，最少需要两个子视图，其中有个属性alignment是子控件内部按照什么对齐方式对齐：

最小是0，最大是1， 是相对于stack内部空间中，最大视图的位置来说的

代码案例：

import 'package:flutter/material.dart';void main() {runApp(MyExampleApp());
}class MyExampleApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var stack = Stack(// 内部控件的对齐方式，最小是0，最大是1， 是相对于stack内部空间中，最大视图的位置来说的alignment: FractionalOffset(0.5, 0.8),  children: [CircleAvatar(backgroundImage: NetworkImage('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg'),radius: 100.0,),Container(decoration: BoxDecoration(color: Colors.blueAccent),padding: EdgeInsets.all(5.0),child: Text('ZhuZhu'),)],);return MaterialApp(title: "布局案例",home: Scaffold(appBar: AppBar(title: Text("层叠布局"),),body: Center(child: stack,),),);}
}

效果图：
在这里插入图片描述

8.2 如果stack的子视图多于2个的使用方法

如果stack子视图大于2个，那么用alignment 的对齐方式来布局，就非常的不优化，此时，可以选择Positioned组件来设置布局，代码如下：

import 'package:flutter/material.dart';void main() {runApp(MyExampleApp());
}class MyExampleApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var stack = Stack(// 内部控件的对齐方式，最小是0，最大是1， 是相对于stack内部空间中，最大视图的位置来说的alignment: FractionalOffset(0.5, 0.8),  children: [CircleAvatar(backgroundImage: NetworkImage('https://pic.rmb.bdstatic.com/bjh/news/0fc6b71c59a69f39cf2e1244d10eaedc.jpeg'),radius: 100.0,),Positioned(top: 10.0,left: 10.0,child: Container(decoration: BoxDecoration(color: Colors.blueAccent),padding: EdgeInsets.all(5.0),child: Text("zhuzhu"),)),Positioned(bottom: 10.0,right: 10.0,child: Container(decoration: BoxDecoration(color: Colors.deepOrange),padding: EdgeInsets.all(5.0),child: Text("技术猪"),)),],);return MaterialApp(title: "布局案例",home: Scaffold(appBar: AppBar(title: Text("层叠布局"),),body: Center(child: stack,),),);}
}

效果图如下：
在这里插入图片描述

8. 卡片布局案例

用Card组件来实现，代码如下：

import 'package:flutter/material.dart';void main() {runApp(MyExampleApp());
}class MyExampleApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var card = Card(child: Column(children: [ListTile(title: Text("福建省厦门市湖里区", style: TextStyle(fontWeight: FontWeight.w700)),subtitle: Text("zhuzhu：15100001234"),leading: Icon(Icons.account_box, color: Colors.blueAccent),),Divider(),ListTile(title: Text("北京市海淀区中关村", style: TextStyle(fontWeight: FontWeight.w700)),subtitle: Text("guoguo：15100001234"),leading: Icon(Icons.account_box, color: Colors.blueAccent),),Divider(),ListTile(title: Text("上海市浦江区", style: TextStyle(fontWeight: FontWeight.w700)),subtitle: Text("xuexue：15100001234"),leading: Icon(Icons.account_box, color: Colors.blueAccent),),],),);return MaterialApp(title: "布局案例",home: Scaffold(appBar: AppBar(title: Text("层叠布局"),),body: Center(child: card,),),);}

效果图：
在这里插入图片描述


http://www.ppmy.cn/devtools/153061.html

相关文章

基于 STM32 的智能农业温室控制系统设计

基于 STM32 的智能农业温室控制系统设计

1. 引言 随着农业现代化的发展&#xff0c;智能农业温室控制系统对于提高农作物产量和质量具有重要意义。该系统能够实时监测温室内的环境参数&#xff0c;如温度、湿度、光照强度和土壤湿度等&#xff0c;并根据这些参数自动调节温室设备&#xff0c;如通风扇、加热器、加湿器…
阅读更多...
docker-registry

docker-registry

安装依赖 apt install apache2-utils设置密码 htpasswd -Bbn 用户名 密码 >/data/registry_hub/passwd#docker私服部署 docker run -d -p 5000:5000 --name docker-registry -v /data/registry_hub/:/var/lib/registry -v /data/registry_hub/passwd:/auth/htpasswd \ -e …
阅读更多...
【前端】CSS实战之音乐播放器

【前端】CSS实战之音乐播放器

目录 播放器背景旋转音乐封面按钮进度条音量调节音乐信息按钮的效果JavaScript部分播放和暂停音乐切换音乐信息进度条 音量调节避免拖拽时的杂音音量调节条静音和解除静音 自动下一首实现一个小效果最终效果 播放器背景 <div class"play_box"></div>设置…
阅读更多...
从0到1：.NET Core微服务的Docker容器奇幻冒险

从0到1：.NET Core微服务的Docker容器奇幻冒险

扬帆起航&#xff1a;开启技术新征程 在当今软件开发的广袤海洋中&#xff0c;技术浪潮此起彼伏&#xff0c;不断推动着行业的变革与发展。.NET Core 微服务与 Docker 容器化技术的结合&#xff0c;宛如一艘强大的战舰&#xff0c;引领着开发者驶向高效、灵活、可扩展的软件开…
阅读更多...
2025年美国大学生数学建模竞赛赛前准备计划

2025年美国大学生数学建模竞赛赛前准备计划

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击文末的卡片&#xff0c;那是获取资料的入口&#xff01; 知识技能&#xff0c;火速巩固 01 数学模型&#xff1a; 回顾核心理论&#xff1a;快速回顾数学建模的基础理论&#xff0c;如线性代数、概率统计、微分方…
阅读更多...
Linux的软件安装

Linux的软件安装

一、Mysql的在线与离线安装 进入Mysql的官网按照下图步骤可以看到安装的方式&#xff1a;MySQL 1.1、在线安装 yum list | grep "^mysql"在上图中选择自己想要的版本进行下载即可&#xff08;这里推荐mysql-server.x86_64 &#xff09;&#xff0c;安装好后需要看看…
阅读更多...
Alibaba Spring Cloud 四 Seata 的核心组件：TC

Alibaba Spring Cloud 四 Seata 的核心组件：TC

Seata 的 Transaction Coordinator (TC) 是分布式事务架构中的核心组件之一&#xff0c;它负责管理全局事务的生命周期&#xff0c;包括事务的创建、状态维护以及协调各分支事务的提交和回滚。以下是有关 TC 的详细解析及其配置和使用方法&#xff1a; 1. TC 的核心功能 全局事…
阅读更多...
高性能队列 Disruptor 在 IM 系统中的实战

高性能队列 Disruptor 在 IM 系统中的实战

高性能队列 Disruptor 在 IM 系统中的实战 前三期我们介绍了Disruptor的典型使用场景和相关高性能原理&#xff0c;本期我介绍一下Disruptor在IM系统用的应用实战&#xff0c;IM系统即社交聊天系统&#xff0c;对实时性的要求非常高&#xff0c;非常符合Disruptor的使用场景。 …
阅读更多...
最新文章

Copyright @ 2022~2023