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

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

1.5 富文本的使用

富文本主要用到两个组件：

  • RichText
  • TextSpan

代码如下：

class TextDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return RichText(text: TextSpan(text: "你好",style: TextStyle(color: Colors.deepOrange,fontSize: 34.0,fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),children: [TextSpan(text: ",zhuzhu",style: TextStyle(fontSize: 17.0,color: Colors.lightGreen))]));}
}

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

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

自定义的样式：

Alignment(x, y), x和y的取值都是 -1~1 之间，（0，0）表示居中；
x = -1 表示最左，0表示居中，1表示最右， 同时也可以设置 -1~1 直接任意的值
y = -1 表示顶部，0表示居中，1表示底部， 同时也可以设置 -1~1 直接任意的值

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(// LinearGradient 线性渐变，如果直接用Gradient也可以gradient: const LinearGradient(colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]))

2.6 decoration 来 添加圆角、边框、阴影

import 'package:flutter/material.dart';class TextDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(color: Colors.green,child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Container(child: Icon(Icons.pool, size: 32.0, color: Colors.white),// color: Color.fromRGBO(3, 53, 255, 1.0),padding: EdgeInsets.all(8.0),margin: EdgeInsets.all(16.0),width: 90.0,height: 90.0,decoration: BoxDecoration(color: Color.fromRGBO(3, 53, 255, 1.0),// 边框// border: Border(//   top: BorderSide(//     color: Colors.orange,//     width: 3.0,//     style: BorderStyle.solid//   ),//   bottom: BorderSide(//     color: Colors.yellow,//     width: 3.0,//     style: BorderStyle.solid//   ),border: Border.all(color: Colors.orange,width: 3.0,style: BorderStyle.solid),// 圆角// borderRadius: BorderRadius.circular(8.0)borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),bottomRight: Radius.circular(30.0),),// 阴影效果boxShadow: [BoxShadow(offset: Offset(6.0, 7.0),color: Color.fromRGBO(16, 20, 188, 1.0),blurRadius: 25.0,spreadRadius: 5.0)]),)],),);}
}

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

2.6 decoration 来 添加背景图

import 'package:flutter/material.dart';class TextDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(decoration: BoxDecoration(image: DecorationImage(image: NetworkImage("https://i-blog.csdnimg.cn/blog_migrate/41635df939e6dd13c6d5e2af785d358b.jpeg"),// 对齐方法alignment: Alignment.topCenter,// 重复的样式// repeat: ImageRepeat.repeatYfit: BoxFit.cover,// 颜色混合colorFilter: ColorFilter.mode(// 颜色值Colors.indigoAccent.withAlpha(122),// 混合模式BlendMode.hardLight))),// color: Colors.green,child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Container(child: Icon(Icons.pool, size: 32.0, color: Colors.white),// color: Color.fromRGBO(3, 53, 255, 1.0),padding: EdgeInsets.all(8.0),margin: EdgeInsets.all(16.0),width: 90.0,height: 90.0,decoration: BoxDecoration(color: Color.fromRGBO(3, 53, 255, 1.0),// 边框// border: Border(//   top: BorderSide(//     color: Colors.orange,//     width: 3.0,//     style: BorderStyle.solid//   ),//   bottom: BorderSide(//     color: Colors.yellow,//     width: 3.0,//     style: BorderStyle.solid//   ),border: Border.all(color: Colors.orange,width: 3.0,style: BorderStyle.solid),// 圆角// borderRadius: BorderRadius.circular(8.0)borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),bottomRight: Radius.circular(30.0),),// 阴影效果boxShadow: [BoxShadow(offset: Offset(6.0, 7.0),color: Color.fromRGBO(16, 20, 188, 1.0),blurRadius: 25.0,spreadRadius: 5.0)]),)],),);}
}

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

2.7 使用案例

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.4 repeat属性的使用

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

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

3.5 本地图片的使用

首先，在项目的根目录中，添加一个文件夹, 命名为images，然后把图片拖进去，如下图：
在这里插入图片描述

其次，项目的pubspec.yaml的文件中，配置本地图片，如下图：
在这里插入图片描述

最后，在代码中引用Image.asset('images/picture_1.png')，代码如下：

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: "图片本地展示",home: FirstPage()));
}class FirstPage extends StatelessWidget {const FirstPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("图片本地加载")),body: Center(// 引用本地图片的代码child: Image.asset('images/picture_1.png'),),);}
}

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

7.1 Row和Column中mainAxisAlignment

Row和Column中有个属性mainAxisAlignment设置主轴的布局方式，主要有这六种值：

  • MainAxisAlignment.start
  • MainAxisAlignment.center
  • MainAxisAlignment.end
  • MainAxisAlignment.spaceBetween
  • MainAxisAlignment.spaceAround
  • MainAxisAlignment.spaceEvenly

以column为例，对应的效果图如下：
在这里插入图片描述

7.2 Row和Column中crossAxisAlignment

Row和Column中有个属性crossAxisAlignment设置交叉轴的布局方式，交叉轴指的是跟主轴方向垂直的轴， 主要有这四种值：

CrossAxisAlignment.start
CrossAxisAlignment.center
CrossAxisAlignment.end
CrossAxisAlignment.stretch
在这里插入图片描述

8. 层叠布局Stack案例

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.3. Positioned 组件

Positioned组件用于在Stack中定位子组件的位置。Positioned组件必须作为Stack的直接子组件使用。

Positioned 的默认构造函数如下：

const Positioned({Key? key,this.left, this.top,this.right,this.bottom,this.width,this.height,required Widget child,
})

left、top 、right、 bottom分别代表离Stackd的 左、上、右、底四边的距离。
width和height用于指定需要定位元素的宽度和高度。
注意，Positioned的width、height 和其他地方的意义稍微有点区别，此处用于配合left、top 、right、 bottom来定位组件。
举个例子，在·水平方向·时，你只能指定eft、right、width三个属性中的`两个，
如指定left和width后，right会自动算出(left+width)，如果同时指定三个属性则会报错，垂直方向同理。

参考文档：https://www.cnblogs.com/linuxAndMcu/p/18458616#_label1

9. 卡片布局Card案例

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

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

10. PageView的使用

PageView 的组件相当于iOS的UIScrollView视图，常用的应该是两种方法：

  1. PageView()
  2. PageView.builder()

10.1 PageView() 方法的使用 案例

// 用PageView() 的方法创建视图
class PageViewDemo1 extends StatelessWidget {const PageViewDemo1({super.key});@overrideWidget build(BuildContext context) {return PageView(// 设置滚动的方向scrollDirection: Axis.horizontal,// 设置选中页面的回调onPageChanged: (currentPage) {print("选中了第$currentPage页");},controller: PageController(// 默认展示第几个页面initialPage: 1,// 是否记住上次滚动的页面位置keepPage: false,// 设置页面在屏幕展示的大小，默认为1，全屏展示viewportFraction: 0.85),children: [Container(color: Colors.brown,alignment: Alignment(0, 0),child: Text("ONe",style: TextStyle(fontSize: 32.0, color: Colors.white),),),Container(color: Colors.purple,alignment: Alignment(0, 0),child: Text("TWO",style: TextStyle(fontSize: 32.0, color: Colors.white),),),Container(color: Colors.orange,alignment: Alignment(0, 0),child: Text("THREE",style: TextStyle(fontSize: 32.0, color: Colors.white),),),],);}
}

10.2 PageView.builder 方法的使用案例

// 用PageView.builder的方法创建视图
class PageViewBuilerDemo  extends StatelessWidget {const PageViewBuilerDemo({super.key});@overrideWidget build(BuildContext context) {return PageView.builder(itemCount: posts.length,itemBuilder: _pageItemBuilder);}Widget _pageItemBuilder(BuildContext context, int index) {return Stack(children: [SizedBox.expand(child: Image.network(posts[index].imageUrl, fit: BoxFit.cover),),Positioned(right: 16.0,bottom: 16.0,child: Column(children: [Text(posts[index].title, style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),),Text(posts[index].author, style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.normal))],))],);}
}

效果图如下：
请添加图片描述

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

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

相关文章

Java面试题2025-并发编程进阶（线程池和并发容器类）

Java面试题2025-并发编程进阶（线程池和并发容器类）

线程池 一、什么是线程池 为什么要使用线程池 在开发中&#xff0c;为了提升效率的操作&#xff0c;我们需要将一些业务采用多线程的方式去执行。 比如有一个比较大的任务&#xff0c;可以将任务分成几块&#xff0c;分别交给几个线程去执行&#xff0c;最终做一个汇总就可…
阅读更多...
算法基础学习——二分查找（附带Java模板）

算法基础学习——二分查找（附带Java模板）

有单调性的数列一定可以使用二分&#xff0c;没有单调性的题目也可能可以使用二分&#xff1b; &#xff08;一&#xff09;整数二分 二分的本质&#xff1a; 在某个整数区间内&#xff0c;存在某种性质使得区间内左半边的数都不满足该性质&#xff1b;而右半边的数都满足该性…
阅读更多...
【Redis】List 类型的介绍和常用命令

【Redis】List 类型的介绍和常用命令

1. 介绍 Redis 中的 list 相当于顺序表&#xff0c;并且内部更接近于“双端队列”&#xff0c;所以也支持头插和尾插的操作&#xff0c;可以当做队列或者栈来使用&#xff0c;同时也存在下标的概念&#xff0c;不过和 Java 中的下标不同&#xff0c;Redis 支持负数下标&#x…
阅读更多...
如何看待 OpenAI 的12天“shipmas”发布计划？

如何看待 OpenAI 的12天“shipmas”发布计划？

openAI的“Shipmas”并非单纯的营销活动，而是在用户增长、技术创新和市场竞争中的综合布局和战略体现。 史上最寒酸的发布会？继十月马斯克在好莱坞电影城高调发布特斯拉三款最新产品（无人出租车、无人巴士、人形机器人）后，十二月，OpenAI CEO 奥特曼宣布 OpenAI 将连续12…
阅读更多...
1.26学习

1.26学习

misc buuctf-神秘龙卷风 下载附件后打开&#xff0c;果然是一个加密的压缩包&#xff0c;用工具对这个压缩包进行破解&#xff0c;根据题目的四位数字我们可以知道密码是四位数字&#xff0c;所以破解得到密码解压后看到的是一串密文&#xff0c;是Brainfuck密文&#xff0c;…
阅读更多...
把本地搭建的hexo博客部署到自己的服务器上

把本地搭建的hexo博客部署到自己的服务器上

配置远程服务器的git 安装git 安装依赖工具包 yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel安装编译工具 yum install -y gcc perl-ExtUtils-MakeMaker package下载git&#xff0c;也可以去官网下载了传到服务器上 wget https://www.ke…
阅读更多...
Ollama 运行从 ModelScope 下载的 GGUF 格式的模型

Ollama 运行从 ModelScope 下载的 GGUF 格式的模型

本文系统环境 Windows 10 Ollama 0.5.7 Ollama 是什么&#xff1f; Ollama 可以让你快速集成和部署本地 AI 模型。它支持各种不同的 AI 模型&#xff0c;并允许用户通过简单的 API 进行调用 Ollama 的安装 Ollama 官网 有其下载及安装方法&#xff0c;非常简便 但如果希…
阅读更多...
【LLM】deepseek多模态之Janus-Pro和JanusFlow框架

【LLM】deepseek多模态之Janus-Pro和JanusFlow框架

note 文章目录 note一、Janus-Pro&#xff1a;解耦视觉编码&#xff0c;实现多模态高效统一技术亮点模型细节 二、JanusFlow&#xff1a;融合生成流与语言模型&#xff0c;重新定义多模态技术亮点模型细节 Reference 一、Janus-Pro&#xff1a;解耦视觉编码&#xff0c;实现多模…
阅读更多...
【C++】特殊类设计、单例模式与类型转换

【C++】特殊类设计、单例模式与类型转换

目录 一、设计一个类不能被拷贝 &#xff08;一&#xff09;C98 &#xff08;二&#xff09;C11 二、设计一个类只能在堆上创建对象 &#xff08;一&#xff09;将构造函数私有化&#xff0c;对外提供接口 &#xff08;二&#xff09;将析构函数私有化 三、设计一个类只…
阅读更多...
【漫话机器学习系列】064.梯度下降小口诀（Gradient Descent rule of thume）

【漫话机器学习系列】064.梯度下降小口诀（Gradient Descent rule of thume）

梯度下降小口诀 为了帮助记忆梯度下降的核心原理和关键注意事项&#xff0c;可以用以下简单口诀来总结&#xff1a; 1. 基本原理 损失递减&#xff0c;梯度为引&#xff1a;目标是让损失函数减少&#xff0c;依靠梯度指引方向。负梯度&#xff0c;反向最短&#xff1a;沿着负…
阅读更多...
Autogen_core 测试代码：test_cache_store.py

Autogen_core 测试代码：test_cache_store.py

目录 原始代码测试代码代码中用到的typing注解 原始代码 from typing import Dict, Generic, Optional, Protocol, TypeVarT TypeVar("T")class CacheStore(Protocol, Generic[T]):"""This protocol defines the basic interface for store/cache o…
阅读更多...
文件上传2

文件上传2

BUUCTF 你传你&#x1f40e;呢 先上传.htaccess 修改格式 即可上传成功 返回上传图片格式的木马 用蚁剑连接 5ecf1cca-59a1-408b-b616-090edf124db5.node5.buuoj.cn:81/upload/7d8511a847edeacb5385299396a96d91/rao.jpg 即可得到flag [GXYCTF2019]BabyUpload
阅读更多...
挂载mount

挂载mount

文章目录 1.挂载的概念(1)挂载命令&#xff1a;mount -t nfs(2)-t 选项&#xff1a;指定要挂载的文件系统类型(3)-o选项 2.挂载的目的和作用(1)跨操作系统访问&#xff1a;将Windows系统内容挂载到Linux系统下(2)访问外部存储设备(3)整合不同的存储设备 3.文件系统挂载要做的事…
阅读更多...
UE求职Demo开发日志#15 思路与任务梳理、找需要的资源

UE求职Demo开发日志#15 思路与任务梳理、找需要的资源

1 思路梳理 因为有点无从下手&#xff0c;就梳理下最终形态. 基地的建设我是想单独一个场景&#xff0c;同一个关卡中小怪会每次来都会刷&#xff0c;小解密一次性的&#xff0c;关键的Boss和精英怪不会重复刷&#xff0c;同时场景里放一些资源可收集&#xff0c;基地建设锁定区…
阅读更多...
vulfocus/thinkphp:6.0.12 命令执行

vulfocus/thinkphp:6.0.12 命令执行

本次测试是在vulfocus靶场上进行 漏洞介绍 在其6.0.13版本及以前，存在一处本地文件包含漏洞。当多语言特性被开启时，攻击者可以使用lang参数来包含任意PHP文件。 虽然只能包含本地PHP文件，但在开启了register_argc_argv且安装了pcel/pear的环境下，可以包含/usr/local/lib/…
阅读更多...
洛谷P3884 [JLOI2009] 二叉树问题（详解）c++

洛谷P3884 [JLOI2009] 二叉树问题（详解）c++

题目链接&#xff1a;P3884 [JLOI2009] 二叉树问题 - 洛谷 | 计算机科学教育新生态 1.题目解析 1&#xff1a;从8走向6的最短路径&#xff0c;向根节点就是向上走&#xff0c;从8到1会经过三条边&#xff0c;向叶节点就是向下走&#xff0c;从1走到6需要经过两条边&#xff0c…
阅读更多...
如何获取小程序的code在uniapp开发中

如何获取小程序的code在uniapp开发中

如何获取小程序的code在uniapp开发中&#xff0c;也就是本地环境&#xff0c;微信开发者工具中获取code&#xff0c;这里的操作是页面一进入就获取code登录&#xff0c;没有登录页面的交互&#xff0c;所以写在了APP.vue中&#xff0c;也就是小程序一打开就获取用户的code APP.…
阅读更多...
k8s支持自定义field-selector spec.hostNetwork过滤

k8s支持自定义field-selector spec.hostNetwork过滤

好久没写博客啦&#xff0c;年前写一个博客就算混过去啦&#x1f602; 写一个小功能&#xff0c;对于 Pod&#xff0c;在没有 label 的情况下&#xff0c;支持 --field-selector spec.hostNetwork 查询 Pod 是否为 hostNetwork 类型&#xff0c;只为了熟悉 APIServer 是如何构…
阅读更多...
olloama下载deepseek-r1大模型本地部署

olloama下载deepseek-r1大模型本地部署

1.登录olloama&#xff0c;选择models&#xff0c;选择deepseek-r1模型&#xff0c;选择1.5b(核显电脑) 2.选择1.5b&#xff0c;复制命令&#xff0c;打开CMD控制台&#xff1b; 3.控制台输入ollama run deepseek-r1:1.5b自动下载 4.部署完成 5.退出【Ctrl d】or 【/bye】 …
阅读更多...
C语言初阶力扣刷题——349. 两个数组的交集【难度：简单】

C语言初阶力扣刷题——349. 两个数组的交集【难度：简单】

1. 题目描述 力扣在线OJ题目 给定两个数组&#xff0c;编写一个函数来计算它们的交集。 示例&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[2] 输入&#xff1a;nums1 [4,9,5], nums2 [9,4,9,8,4] 输出&#xff1a;[9,4] 2. 思路 直接暴力…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023