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

相关文章
|
6月前
|
Dart
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)
|
6月前
|
Dart
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)
|
6月前
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
|
7月前
Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
73 3
|
6月前
|
Dart 前端开发 容器
带你读《深入浅出Dart》二十五、Widget和布局(1)
带你读《深入浅出Dart》二十五、Widget和布局(1)
|
6月前
|
Dart iOS开发
带你读《深入浅出Dart》二十八、Material和Cupertino组件(2)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(2)
|
6月前
|
Dart 容器
带你读《深入浅出Dart》二十八、Material和Cupertino组件(1)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(1)
|
6月前
|
Dart iOS开发
带你读《深入浅出Dart》二十八、Material和Cupertino组件(3)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(3)
|
6月前
|
Dart
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(3)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(3)
|
6月前
|
Dart C++
带你读《深入浅出Dart》二十四、编写第一个Flutter应用
带你读《深入浅出Dart》二十四、编写第一个Flutter应用