【flutter】Expanded组件

最新推荐文章于 2024-05-12 22:20:55 发布
最新推荐文章于 2024-05-12 22:20:55 发布
阅读量300 收藏 1
点赞数
原文链接：https://blog.csdn.net/devnn/article/details/105892081
版权

运行效果：
在这里插入图片描述
如果不明白为什么会这样，请参阅我的另一篇文章 flutter Row和Column组件

示例二：将Row中的第一个组件使用Expanded包裹


可以看到，将第一个组件使用Expanded包裹后，第一个组件设置的width会无效，并且它在主轴方向变大，直到填充剩余空间，但在纵轴方向上并没有变大，依然维持自身的height。

第一个图像因为设置了 fit: BoxFit.cover，所以会被裁剪。BoxFit.cover表示图像填充组件，多余的进行裁剪处理。

示例三：使用Expanded实现Row中所有组件平均分配剩余空间
————————————————

运行效果：

有人会问，这样跟将Row设置mainAxisAlignment:MainAxisAlignment.spaceEvenly有什么区别呢？MainAxisAlignment.spaceEvenly 并不会改变子组件的尺寸，大家可以参阅我的另一篇文章
flutter Row和Column组件 示例六

示例四：将一个组件设置成其它组件的两倍大小

运行效果：
在这里插入图片描述
由于其它组件弹性系数默认是1，中间组件设置了弹性系数2，因此宽度是其它组件的两倍。

Expanded组件的属性比较少，用途广泛，用法也很简单。关于它的介绍就到这里，不知道你有没有学会？学会了点个赞呗~

https://blog.csdn.net/devnn/article/details/105892081

弯弯的小溪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FlutterGridView组件以及动态GridView、Paddiing Row Column Expanded组件详解
06-03
总之，理解并熟练运用Flutter中的GridView、动态GridView、Padding、Row、Column和Expanded组件，对于提升应用的用户体验和设计能力具有重要意义。通过实践和不断探索，开发者可以充分发挥Flutter框架的优势，打造...
flutter 实战 之 Row 和 Column 和 Expanded 布局
wniuniu_的博客
07-31 1363
如何利用 Column 和 Row 构造
Flutter-Expand的使用说明
chuyouyinghe的专栏
07-05 1354
Flutter-Expand的使用说明 Expanded常用于Row, Column, Flex的子元素中；在使用Expanded子Widget的时候，能够填充满剩余空间。 Expanded的定义 Expanded的定义非常简单，里面只包含flex和child属性 const Expanded({ Key key, int flex = 1, @required Widget child, }) flex代表着当前Expanded的宽度（高度）占比系数； child
Flutter 中的 Expanded 小部件：全面指南
最新发布
smileKH的博客
05-12 1171
Expanded是 Flutter 中一个非常实用的小部件，它提供了一种简单而灵活的方式来控制子控件在布局中占据的空间。通过合理使用Expanded，你可以创建出既美观又适应不同屏幕尺寸的布局界面。掌握Expanded的使用，对于任何 Flutter 开发者来说都是一项重要的技能。
Flutter Row,Column和Expanded
qq_42572245的博客
06-07 2016
1.Row class HomeContext extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( width: 300, height: 400, color: Colors.cyan,//背景颜色 child: Row( mainAxis
【Flutter组件】Expanded详解
It一zhai男
07-21 3116
Expanded详解以及注意事项
flutter Image图片设置大小失效
BFELFISH的博客
11-13 6747
Container( width: 47.5, height: 47.5, child: Image.asset( CommonUtils.getAssertImagePath('home_label_menu'), color: Colors.black, width: 20, height: 20, .
flutter_scrollable_list
10-03
`flutter_scrollable_list` 是一个专为实现自适应和灵活滚动体验的组件。在这个话题中，我们将深入探讨`shrinkWrap`和`Expanded`这两个关键属性，以及它们如何在Flutter中帮助我们优化列表性能。 首先，让我们了解`...
Flutter实现webview与原生组件组合滑动的示例代码
08-26
在开发Flutter应用时，有时我们需要将WebView与原生组件（如文本、图片等）结合使用，以便在同一个页面上展示不同类型的交互内容。在这种场景下，实现WebView与原生组件的组合滑动是一项挑战，因为它们通常需要共享...
Flutter 基本布局
01-20
例如，`Row`和`Column`用于水平和垂直排列子组件，`Stack`允许你在顶部叠加组件，`Flexible`和`Expanded`帮助处理不同大小屏幕的自适应布局。了解并熟练掌握这些布局技巧是开发高质量Flutter应用的基础。
flutter 仿豆瓣点评
07-09
【Flutter 仿豆瓣点评】项目是一个使用Flutter框架开发的移动端应用示例，旨在模仿豆瓣电影的用户点评功能，...在完成项目的过程中，不断探索和研究每个组件和功能的工作原理，将有助于你成为一位熟练的Flutter开发者。
Flutter Flex（Row Column，Expanded, Stack） 组件
github_36850997的博客
04-14 806
这个Flex 继承自 MultiChildRenderObjectWidget，所以是多子布局组件Flex 的子组件就是Row 和 Column , 之间的区别就是Flex 的 direction 设置不同。它有两个轴，一个是MainAxis 还有一个是交叉轴 CrossAxis。
Flutter Widget 之 Expanded（填充布局）
一只程序菜鸡的博客
01-13 2184
Flutter的Expanded布局与Android布局中weight属性类似，可以设置占满剩余空间。 1. Expanded构造方法： const Expanded({ Key key, int flex = 1, //占比 @required Widget child, }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child); 示例： import 'package:flutter/materia
Flutter页面布局之Padding、Row、Column、Expanded
一花一世界 一叶一菩提
02-11 1427
目录 1、Padding组件 2、Row水平布局组件 3、Column垂直布局组件 4、Expanded弹性布局 5、小Demo Padding组件 padding是布局中最常用的布局，因为Flutter中有好多组件并没有padding属性，所以要用padding组件来包裹起来。 常用属性：padding和child import 'package:flutter/materi...
8.flutter之GridView和自定义控件，以及Row,Expanded
wangaolong0427的博客
04-08 478
GridView 其实这个跟安卓原生里的listView的进阶版RecyclerView很像，什么瀑布流，网格流都基本靠这个来实现的 GridView的写法和listView的写法大同小异 这边先初始化20条item看看效果 import 'package:flutter/material.dart'; import 'package:flutter_app/ClipOval.dart'; void main()=>runApp(MyApp()); class MyApp extends Sta
Flutter组件（Padding，Row，Column，Expanded）
m0_46527751的博客
01-12 620
Flutter组件Padding组件Row和Column组件Row(水平展示)Column(垂直展示)Expanded示例演示 Padding组件 Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。 属性 说明 padding padding 值, EdgeInsetss 设置填充的值 child 子组件 在下面示例中，在网格布局排布图片的同时，每张图片之间或与边缘之间都设置了一个边距，因此我们在每
Flutter-Expanded的使用说明
lvsonghai的博客
02-09 3638
Flutter-Expanded的使用说明 Expanded常用于Row, Column, Flex的子元素中；在使用Expanded子Widget的时候，能够填充满剩余空间。 Expanded的定义 Expanded的定义非常简单，里面只包含flex和child属性 const Expanded({ Key key, int flex = 1, @required Wid...
Flutter页面布局：Padding边距，Row水平布局，Column垂直布局，Expanded，Wrap流式布局
weixin_46136019的博客
03-14 795
在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。
flutter 自定义tab组件
08-14
在Flutter中，可以通过自定义Widget来创建一个自定义的Tab组件。首先，我们可以创建一个自定义的Tab类，继承自StatefulWidget，并实现它的build方法。 ```dart class CustomTab extends StatefulWidget { final String title; final bool isSelected; final Function onTap; CustomTab({required this.title, required this.isSelected, required this.onTap}); @override _CustomTabState createState() => _CustomTabState(); } class _CustomTabState extends State<CustomTab> { @override Widget build(BuildContext context) { return GestureDetector( onTap: widget.onTap, child: Container( color: widget.isSelected ? Colors.blue : Colors.transparent, child: Text( widget.title, style: TextStyle( fontSize: 16, color: widget.isSelected ? Colors.white : Colors.black, ), ), ), ); } } ``` 在这个自定义Tab类中，我们需要传入三个参数：title（标签的标题），isSelected（标签是否被选中），onTap（点击标签的回调方法）。 接下来，我们可以在TabBar中使用这个自定义Tab组件。 ```dart class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Custom Tab'), ), body: Column( children: [ TabBar( controller: _tabController, tabs: [ CustomTab( title: 'Tab 1', isSelected: _tabController.index == 0, onTap: () { _tabController.animateTo(0); }, ), CustomTab( title: 'Tab 2', isSelected: _tabController.index == 1, onTap: () { _tabController.animateTo(1); }, ), CustomTab( title: 'Tab 3', isSelected: _tabController.index == 2, onTap: () { _tabController.animateTo(2); }, ), ], ), Expanded( child: TabBarView( controller: _tabController, children: [ Center(child: Text('Content 1')), Center(child: Text('Content 2')), Center(child: Text('Content 3')), ], ), ), ], ), ); } } ``` 在这个例子中，我们使用TabBar和TabBarView来显示标签和对应的内容。自定义的Tab组件被作为TabBar的child组件传入。TabBar接收一个TabController来管理标签的切换。每个自定义Tab组件通过传入isSelected参数来判断自身是否被选中，并通过onTap回调方法来触发点击事件并切换标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值