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