Flutter容器

最新推荐文章于 2024-10-22 07:50:15 发布
最新推荐文章于 2024-10-22 07:50:15 发布
阅读量1k 收藏 16
点赞数 30
文章标签： flutter javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AYBBZXY/article/details/139175185
版权

内边距padding

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(//为了可以看出内边距，将容器设置成红色
      color: Colors.red,
      child: Padding(
        padding: EdgeInsets.all(15),
        child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
      ),
    );
  }
}
 
 
//定义一个 公共类
class MyImage extends StatelessWidget {
  String imgUrl;
  MyImage(this.imgUrl);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      child: Image.network(this.imgUrl,fit: BoxFit.cover,),
    );
  }
}

布局限制类容器

  • 布局限制类容器是用来限制子元素的,并不是用来限制自身的
body: ConstrainedBox(
	constraints: BoxConstraints. expandO.//编辑剩余空间
constraints: BoxConstraints(
	minWidth: double. infinity,
	minHeipht: 200,
	maxHeight: 300
),
child: Container(
	width: 1,
	color: Colors. red
)
)
);

装饰容器

  • DecoratedBox可以在其子组件绘制前后增加一些装饰，如背景、边框等。
body: DecoratedBox(decoration: BoxDecoration(
	gradient: LinearGradient (colors: [Colors. yellow, Colors. red]),
	borderRadius: BorderRadius. all(Radius. circular(3. 0)),
	boxShadow: [
		BoxShadow(
			color: Colors. black,
			offset: Offset(3, 3),
			blurRadigs: 4.0
		)
	]
),
child: FlatButton(onPressed: null, child: Text ('test button')))

在这里插入图片描述

  • BoxDecoration是DecoratedBox的子类：
BoxDecoration({
  Color color, //颜色
  DecorationImage image,//图片
  BoxBorder border, //边框
  BorderRadiusGeometry borderRadius, //圆角
  List<BoxShadow> boxShadow, //阴影,可以指定多个
  Gradient gradient, //渐变
  BlendMode backgroundBlendMode, //背景混合模式
  BoxShape shape = BoxShape.rectangle, //形状
})

变换transform

  • Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作
Container(
  margin: const EdgeInsets.fromLTRB(20, 100, 20, 20),
  color: Colors.green,
  child: Transform(
    alignment: Alignment.bottomRight, //原点
    transform: Matrix4.skewY(0.5), //沿Y轴倾斜0.5弧度
    child: Container(
      padding: const EdgeInsets.all(10),
      color: Colors.brown,
      child: Text("Flutter NB"),
    ),
  ),
  width: 100,
  height: 50,
),
  • Transform.translate接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离。
Text("平移"),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.purple),
  child: Transform.translate(
    //原点为左上角  往右平移 50  往下平移10
    offset: Offset(50, 10),
    child: Text("谁是最可爱的人?"),
  ),
),
  • Transform.rotate可以对子组件进行旋转变换
Container(
  margin: const EdgeInsets.only(top: 50),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("旋转"),
      DecoratedBox(
        decoration: BoxDecoration(color: Colors.purple),
        child: Transform.rotate(
          angle: pi / 2,
          child: Text("是他是他就是他"),
        ),
      ),
    ],
  ),
),
  • Transform.scale可以对子组件进行缩小或放大
Container(
  margin: const EdgeInsets.only(left: 100, top: 50),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("缩放"),
      DecoratedBox(
        decoration: BoxDecoration(color: Colors.purple),
        child: Transform.scale(
          scale: 2, //放大2倍
          child: Text("大大泡泡糖"),
        ),
      ),
    ],
  ),
),

Container

  • 是flutter里面一个很重要的容器,相当于html中的div
    属性:
  1. key：Container唯一标识符，用于查找更新。
  2. alignment：控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
  3. padding：decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
  4. color：用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
  5. decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
  6. foregroundDecoration：绘制在child前面的装饰。
  7. width：container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
  8. height：container的高度，设置为double.infinity可以强制在高度上撑满。
  9. constraints：添加到child上额外的约束条件。
  10. margin：围绕在decoration和child之外的空白区域，不属于内容区域。
  11. transform：设置container的变换矩阵，类型为Matrix4。
  12. child：container中的内容widget。
    在这里插入图片描述

可滚动widgets

  • 在Flutter中, 当内容超过显示视图时，如果没有特殊处理，Flutter则会提示Overflow错误
  • Flutter提供了多种可滚动（Scrollable Widget）用于显示列表和长布局
  • 可滚动Widget都直接或间接包含一个Scrollable, 下面是常用的几个可滚动的Widget
    1. SingleChildScrollView
    2. ListView
    3. GridView
    4. CustomScrollView
    5. 滚动监听及控制ScrollController

1.SingleChildScrollView,使用的时候外边需要Scrollbar包裹

body: Scrollbar(
	child: SingleChildScrollView(
		child: Container(
			height: 3000,
			color: Colors.red
		)
	),
)

2.ListView

  • ListView是最常用的可滚动widget，它可以沿一个方向线性排布所有子widget, 类似于ReactNative中的ListView

  • ListView共有四种构造函数

      1. ListView()默认构造函数
  2. ListView.builder()
  3. ListView.separated()
  4. ListView custom()

ListView({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    EdgeInsetsGeometry padding,
    
    // 是否根据子widget的总长度来设置ListView的长度，默认值为false
    bool shrinkWrap = false,
    // cell高度
    this.itemExtent,
    // 子widget是否包裹在AutomaticKeepAlive中
    bool addAutomaticKeepAlives = true,
    // 子widget是否包裹在RepaintBoundary中
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    // 设置预加载的区域, moren 0.0
    double cacheExtent,
    //子widget列表
    List<Widget> children = const <Widget>[],
    // 子widget的个数
    int semanticChildCount,
})

例子

class ScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      itemExtent: 60,
      cacheExtent: 100,
      addAutomaticKeepAlives: false,
      children: renderCell(),
    );
  }

  List<Widget> renderCell() {
    String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return str.split("")
    .map((item) => ListTile(
      title: Text('字母--$item'),
      subtitle: Text('这是字母列表'),
      leading: Icon(Icons.wifi),
    )).toList();
  }
}


body: Column(
	children: <Widget>[
		ListTile(title:Text(因定的表头”)),
		Container(
			height: 400,
			child: ListView. builder(
				itemCount: 50,
				itemExtent: 50,
				itemDuilder: (BuildContext context, int index) {
					return Text (' + index. toString0);
				)),
			)
	],
)

3.GridView

GridView可以构建二维网格列表, 系统给出了五中构造函数

  • GridView()
  • GridView.count
  • GridView.extent
  • GridView.builder
  • GridView.custom
// 默认构造函数
GridView({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required this.gridDelegate,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
})
  • 可以看到, 除了gridDelegate属性外, 其他属性和ListView的属性都一样, 含义也都相同
  • SliverGridDelegate是一个抽象类，定义了GridView排列相关接口，子类需要通过实现它们来实现具体的布局算法
  • Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent, 下面我们分别介绍

1. SliverGridDelegateWithFixedCrossAxisCount
该子类实现了一个横轴为固定数量子元素的排列算法，其构造函数为：

const SliverGridDelegateWithFixedCrossAxisCount({
    // 横轴子元素的数量,此属性值确定后子元素在横轴的长度就确定了,即ViewPort横轴长度/crossAxisCount。
    @required this.crossAxisCount,
    // 主轴方向的间距
    this.mainAxisSpacing = 0.0,
    // 侧轴方向子元素的间距
    this.crossAxisSpacing = 0.0,
    // 子元素在侧轴长度和主轴长度的比例, 由于crossAxisCount指定后子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度
    this.childAspectRatio = 1.0,
})

从上面的个属性可以发现，子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。注意，这里的子元素指的是子widget的最大显示空间，注意确保子widget的实际大小不要超出子元素的空间, 代码示例如下

class ScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView(
      padding: EdgeInsets.all(10),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: 1,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10
      ),
      children: <Widget>[
        Container(color: Colors.orange),
        Container(color: Colors.blue),
        Container(color: Colors.orange),
        Container(color: Colors.yellow),
        Container(color: Colors.pink)
      ],
    );
  }
}

2.GridView.count
GridView.count构造函数内部使用了
SliverGridDelegateWithFixedCrossAxisCount，我们通过它可以快速的创建横轴固定数量子元素的GridView

GridView.count({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required int crossAxisCount,
    double mainAxisSpacing = 0.0,
    double crossAxisSpacing = 0.0,
    double childAspectRatio = 1.0,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
})

上面SliverGridDelegateWithFixedCrossAxisCount中给出的示例代码等价于：

class CountGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      padding: EdgeInsets.all(10),
      crossAxisCount: 3,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      childAspectRatio: 1,
      children: <Widget>[
        Container(color: Colors.orange),
        Container(color: Colors.blue),
        Container(color: Colors.orange),
        Container(color: Colors.yellow),
        Container(color: Colors.pink)
      ],
    );
  }
}

3.GridView.extent
同样GridView.extent构造函数内部使用了SliverGridDelegateWithMaxCrossAxisExtent，我们通过它可以快速的创建侧轴子元素为固定最大长度的的GridView

class ExtentScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      padding: EdgeInsets.all(10),
      maxCrossAxisExtent: 100,
      childAspectRatio: 1,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      children: <Widget>[
        Container(color: Colors.orange),
        Container(color: Colors.blue),
        Container(color: Colors.orange),
        Container(color: Colors.yellow),
        Container(color: Colors.pink)
      ],
    );
  }
}

4.GridView.builder

class BuilderGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: 50,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10
      ),
      itemBuilder: (content, index) {
        return Container(
          color: Colors.orange,
          child: Center(
            child: Text('$index'),
          ),
        );
      },
    );
  }
}

5.GridView.custom

W`hite
关注
Flutter中的容器组件
ETHAN IN IT
01-30 911
Container是一个很方便的组件，相当于Web HTML中的div，它包含了公共的绘制，定位和尺寸组件。 更准确的描述，请参考官方Container Class 文档 容器组件用于包含能够应用样式属性的子组件。 如果Container组件没有子项，它将自动填满屏幕上的给定区域，否则它的尺寸取决于给定子元素的高度和宽度。 注意：在没有任何父组件的情况下，不应直接使...
Flutter 笔记 | Flutter 容器组件
川峰的博客
05-25 1749
Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flut
Flutter Widget - Container 容器
张营的技术博客
02-12 583
Container是一个组合类容器，它本身不对应具体的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。
Flutter教程07——容器
m0_37073941的博客
03-15 3534
1.Padding 和css中的padding作用一样，构造器： Padding({ ... EdgeInsetsGeometry padding, Widget child, }) EdgeInsetsGeometry是一个抽象类，其子类EdgeInsets。 EdgeInsets提供了一些方法来设置边框： fromTRB(left，top，right，bottom) all(value) only({left，top，right，bottom}) symmetric({ v
4-Flutter常用组件--容器
u010899537的博客
10-31 245
文章目录一.DecoratedBox1.BoxDecoration二.FittedBox三. 一.DecoratedBox 在其子项 绘制之前或之后 绘制装饰的小部件 decoration :装饰器 position：decoration 是放在child上面还是下面 child：子控件 1.BoxDecoration 装饰器，主要用于decoration属性 backgroundBlendMo...
Flutter基础 -- Flutter容器布局
原来45的博客
06-05 1447
MaterialAPP 脚手架 Scaffold 线性布局 Column Row 盒模型 Box Model 容器 Container 弹性布局 Flex 层叠布局 Stack 流式布局 Wrap 对齐定位 Align
flutter 容器化制作
09-22
很高兴能回答你的问题，Flutter容器化制作的过程包括：1.将Flutter应用程序打包成Docker映像；2.部署Docker映像到容器；3.使用Kubernetes管理容器；4.使用Istio提供服务发现；5.使用Helm管理容器应用程序；6.使用...
flutter 容器充满剩余宽度
07-15
要使Flutter容器充满剩余宽度，您可以使用`Expanded`小部件或`Flexible`小部件将容器包装在其中。这些小部件都可以用于指定子元素在可用空间中的大小和位置。 以下是一个示例，展示了如何使用`Expanded`小部件来使...
flutter 容器Padding、DecoratedBox、Transform、RotatedBox、Container、Clip、FittedBox、Scaffold
qq_30005223的博客
02-15 1357
1.Padding给其子节点添加边距类似于Android Layout布局里面的padding属性。 Padding( padding: EdgeInsets.all(20), child: Text( 'padding1', style: TextStyle(fontSize: 20,color: Colors.red), ),
Flutter 学习 容器类Widget
RikkaTheWorld
12-09 485
文章目录1. 概述2. 填充 Padding3. 装饰容器 DecoratedBox3.1 BoxDecration4. 变换 Transform4.1 平移4.2 旋转4.3 缩放4.4 RotatedBox5. Container容器6. Clip7 FittedBox8. 脚手架 Scaffold 1. 概述 容器类和布局类都是接收子Widget展示，他们有很多相同点，而它们的不同点是： 布局Widget一般接收一个 Widget 数组，它们直接或间接继承自 MultiChildRenderObje
Flutter 初探(三)：容器类Widgets
若数的博客
04-20 1117
学习内容 以下是容器类Widgets的部分汇总： Padding 布局限制类容器ConstrainedBox和SizedBox 装饰类容器DecoratedBox 变换Transform Container容器 Scaffold、底部导航 各个容器简易实现 // Padding class NewPadding extends StatelessWidget { @override W...
Flutter——最详细的Container（容器）使用教程
人生在世
11-26 5059
Container（容器） 属性 作用 child 配置容器内部的布局 padding 设置容器内部的距离 alignment 设置容器内容的对齐方式 color 设置容器背景颜色 margin 设置容器外部的距离 decoration 配置容器的外部的样式 constraints 配置容器的外部的约束，最大小宽、最大小高度 width 设置容器的宽 height 设置容器的高 创建一个指定宽高的容器 import 'package:flutter/m
flutter布局container
qq_34610497的博客
07-12 579
import 'package:flutter/material.dart';void main() =&gt; runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( titl...
Flutter开发之——单组件布局容器-Container
2401_84132370的博客
04-17 865
首先是一个知识清单：（对于现在的Android及移动互联网来说，我们需要掌握的技术）泛型原理丶反射原理丶Java虚拟机原理丶线程池原理丶注解原理丶注解原理丶序列化Activity知识体系（Activity的生命周期丶Activity的任务栈丶Activity的启动模式丶View源码丶Fragment内核相关丶service原理等）代码框架结构优化（数据结构丶排序算法丶设计模式）APP性能优化（用户体验优化丶适配丶代码调优）热修复丶热升级丶Hook技术丶IOC架构设计。
Flutter开发之——多组件布局容器-Row
我的博客
04-08 627
一 概述 Row：英文意思为行，Flutter中是指行布局容器 Row是多组件布局容器，子控件的排列方式为水平方向 二 Row 2.1 构造方法 Row({ Key? key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment =
（原创）Flutter基础入门：各种常用容器类组件
Android_xiong_st的博客
04-14 1264
今天主要讲下Flutter中常用的一些组件
Flutter开发之——单组件布局容器-Container(1)
2401_84132357的博客
04-17 443
光有这些思路和搞懂单个知识的应用是还远远不够的，在Android开源框架设计思想中的知识点还是比较多的，想要搞懂还得学会整理和规划：我们常见的**Android热修复框架、插件化框架、组件化框架、图片加载框架、网络访问框架、RxJava响应式编程框架、IOC依赖注入框架、最近架构组件Jetpack等等Android第三方开源框架，**这些都是属于Android开源框架设计思想的。如下图所示：这位阿里P8大佬针对以上知识点，熬夜整理出了一本长达1042页的完整版如何解读开源框架设计思想。
Flutter Container容器组件实战案例
最新发布
Python私教
10-22 1326
ContaineralignmentContainerpaddingContainermarginContainerdecoration“容器”的强大之处在于它的定制选项。’ alignment’: 在’ Container '内对齐子元素。’ padding’: 在’ Container '内添加空间。margin: 设置“Container”周围的间距。“decoration”: 应用视觉效果，如边界和阴影。Container@overridetitle: '第一个APP',
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值