带你读《深入浅出Dart》二十五、Widget和布局(2)

简介: 带你读《深入浅出Dart》二十五、Widget和布局(2)

带你读《深入浅出Dart》二十五、Widget和布局(1)https://developer.aliyun.com/article/1348605?groupCode=tech_library


Stack

Stack允许将多个子Widget堆叠在一起,可以通过定位、对齐和尺寸调整来控制它们的位置。

 

Stack(
  alignment: Alignment.center,
  children: [
    Container(color: Colors.red, width: 200, height: 200),
    Container(color: Colors.green, width: 150, height: 150),
    Container(color: Colors.blue, width: 100, height: 100),
  ],)

ListView

ListView是一个滚动视图,可用于显示可滚动的列表。你可以使用ListView.builder或ListView.separated来构建列表。

 

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },)

Expanded

Expanded是一个灵活的布局组件,用于占据剩余可用空间。它通常与Row和Column一起使用。

 

Row(
  children: [
    Expanded(
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.green),
    ),
  ],)

 这只是布局组件中的几个例子,Flutter提供了丰富的布局组件,适应各种不同的UI需求。你可以根据需要选择合适的布局组件。

要了解更多关于布局的内容,你可以参考Flutter布局指南open in new window

3.结论

通过理解Widget和常用布局组件,你已经迈出了构建Flutter应用程序的第一步。Widget作为Flutter用户界面的构建块,帮助我们构建出灵活、交互丰富的应用程序。布局组件则允许我们在屏幕上排列和定位Widget,创建出美观、一致的用户界面。

相关文章
|
21天前
|
Linux 程序员 数据格式
【2026最新】Notepad++下载、安装和使用一篇搞定(附中文版安装包)
Notepad++ 是一款免费开源、轻量高效的 Windows 文本编辑器,支持 C/Python/HTML 等 80+ 语言语法高亮、代码折叠、正则替换、编码转换及插件扩展,专为程序员与文本处理用户打造,完美替代系统记事本。(239字)
|
12天前
|
人工智能 JSON 自然语言处理
让教学更智慧:用阿里云百炼工作流,自动生成中小学教材内容#小有可为#有温度的AI
通过可视化工作流编排,将大模型推理能力转化为标准化的教学内容生成引擎。教师只需输入教材标题和适用学段,即可自动获得结构完整、符合课程标准的章节内容,大幅降低备课门槛,助力教育资源均衡化。
493 127
|
6天前
|
人工智能 缓存 安全
Claude Code 封号真实原因曝光,这次彻底不装了,直接针对国内开发者的账号下手?
Claude Code 封号潮背后:逆向扒出客户端隐写区域标记,Anthropic 政策收紧叠加 DeepSeek 7 月涨价,国产替代更紧迫。
|
16天前
|
存储 人工智能 监控
QoderWork完全指南:从入门到精通,把“AI实习生”变成你的全能工作搭档
阿里云2026年推出的桌面端AI工作助手QoderWork,不止聊天,更可动手干活:本地运行、安全可控,支持文件整理、数据分析、PPT生成、网页开发等;内置专家套件、多Agent协作与自定义Skills,让AI真正成为你身边的“AI实习生”。
|
7天前
|
人工智能 安全 程序员
终于,Claude Code 封号的原因被曝光了!竟然针对中国用户,植入隐形代码?!
通俗易懂地揭秘 Claude Code 封号的手段,分享一些自己对 AI 编程困境的思考,Codex、Cursor、DeepSeek、智谱 GLM、甚至是豆包,都有所行动了
422 1
|
8天前
|
人工智能 安全 Cloud Native
Higress 新发布:AI Gateway 能力增强,Gateway API 及其推理扩展持续打磨
增强 AI 网关能力,持续打磨 Gateway API 及其推理扩展。
372 125
|
16天前
|
机器学习/深度学习 人工智能 调度
🐴 HappyHorse 1.1 现已上线阿里云百炼!快来查收模型使用指南,现在调用享 6 折~
HappyHorse 1.1 是新一代视频生成大模型,全面升级动态表现力、角色一致性、指令遵循、视觉质感与音画协同能力。支持I2V/T2V/R2V三类生成,适配短剧、电商广告、品牌营销等场景,提供高质、流畅、可控的AI视频生产力。
928 5
🐴 HappyHorse 1.1 现已上线阿里云百炼!快来查收模型使用指南,现在调用享 6 折~