带你读《深入浅出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,创建出美观、一致的用户界面。

相关文章
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
128 0
|
6月前
|
开发框架 搜索推荐 Android开发
Flutter的Widget基础:概念、分类与深入探索
【4月更文挑战第26天】Flutter Widget详解:基础、分类与工作原理。Widget是Flutter UI的核心,描述界面外观而非直接渲染。分为基础、布局、可滚动及状态管理四大类。基于响应式编程,状态变化时自动更新UI。了解其概念、分类和原理,能助开发者高效构建精美应用。随着Flutter生态发展,Widget系统潜力无限。
|
6月前
|
前端开发 JavaScript 定位技术
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
114 0
|
Dart iOS开发
带你读《深入浅出Dart》二十八、Material和Cupertino组件(3)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(3)
|
Dart 容器
带你读《深入浅出Dart》二十八、Material和Cupertino组件(1)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(1)
|
Dart iOS开发
带你读《深入浅出Dart》二十八、Material和Cupertino组件(2)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(2)
|
Dart 前端开发 容器
带你读《深入浅出Dart》二十五、Widget和布局(1)
带你读《深入浅出Dart》二十五、Widget和布局(1)
|
Dart C++
带你读《深入浅出Dart》二十四、编写第一个Flutter应用
带你读《深入浅出Dart》二十四、编写第一个Flutter应用