Flutter中的Single-Child Layout Widget和Multi-Child Layout Widget有什么区别？答案

【问题标题】：What is the difference between the Single-Child Layout Widget & Multi-Child Layout Widget in flutter?Flutter中的Single-Child Layout Widget和Multi-Child Layout Widget有什么区别？
【发布时间】：2021-01-27 06:56:24
【问题描述】：

我最近开始学习 Flutter。我遇到了布局小部件。在那个阶段，所有的小部件都分为两个阶段。

flutter中的Single-Child Layout Widget和Multi-Child Layout Widget有什么区别？

【问题讨论】：

直观地思考这个问题。考虑一个列小部件，这意味着有多个垂直放置的孩子。所以 Column 是一个多子小部件。另一方面，考虑一个中心小部件，它旨在将其子元素居中，因此它是单个子布局小部件。

标签： flutter flutter-layout

【解决方案1】：

单子布局小部件是那些只接受一个小部件作为子级的小部件

如：Container()、Center()、Expanded()、Align()、SizedBox()等

多子布局小部件是可以接受多个小部件作为子级的小部件

如：Column()、Row()、Stack()、GridView()、ListView()、Table()等

简单来说，每当您看到或使用带有子属性的小部件时，该小部件称为单子布局

Container(child: Text()); 
Center(child: Text());
Expanded(child: Text()); 
Align(child: Text());
SizedBox(child: Text());

并且每当您看到或使用具有子属性的小部件时，该小部件称为多子布局*

Column(children: [Text(), Text(), Text(), Text()]);
Row(children: [Text(), Text(), Text(), Text()]);
Stack(children: [Text(), Text(), Text(), Text()]);
GridView(children: [GridTile(), GridTile(), GridTile(), GridTile()]); 
ListView(children: [ListTile(), ListTile(), ListTile(), ListTile()]);
Table(children: [TableRow(), TableRow(), TableRow(), TableRow()]);

您可以在单子布局中使用多子布局，反之亦然。

// Single child layout with Multi-Child layout
Container(child: ListView(children: [])); 

// Multi-child layout with Single-Child layout
ListView(children: [ 
             Container(child: Text()), 
             Container(child: Text()), 
             Container(child: Text()),
   ]
));

Single-Child Layout Widget 用作其他小部件的 Wrapper，用于更改其位置、宽度、高度、添加空间、边距和对齐内容等。

多子布局小部件用于在水平或垂直方向创建小部件列表，也用于将小部件堆叠在一起，在表格结构中排列数据和小部件等.

希望对您有所帮助！

【讨论】：