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

相关文章
人工智能 缓存 前端开发
12026 63
人工智能 JavaScript 开发工具
4811 17
Web App开发 人工智能 API
1385 1
人工智能 Java BI
1472 1
开发工具 Swift git
1973 6
人工智能 JavaScript 测试技术
2406 2
人工智能 自然语言处理 安全
989 0
人工智能 JavaScript 测试技术
1200 4
缓存 JavaScript Shell
2102 3

热门文章

最新文章