Flutter提供了丰富的布局小部件,用于构建各种不同类型的布局。以下是一些常用的Flutter布局小部件:

1. Container:
Container是一个多功能的小部件,用于包装和布局其他小部件,并提供对宽度、高度、边距、填充等的控制。
Container(
  width: 200,
  height: 200,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(16),
  color: Colors.blue,
  child: Text('Hello, Container!', style: TextStyle(color: Colors.white)),
)

2. Row 和 Column:
Row和Column分别用于水平和垂直排列子小部件。
Row(
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
)
Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
)

3. ListView:
ListView用于构建可滚动的列表。
ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
  ],
)

4. Stack 和 Positioned:
Stack允许子小部件堆叠在一起,可以通过Positioned小部件进行定位。
Stack(
  children: [
    Container(color: Colors.blue),
    Positioned(
      top: 10,
      left: 10,
      child: Text('Top Left', style: TextStyle(color: Colors.white)),
    ),
  ],
)

5. Expanded 和 Flexible:
Expanded用于将子小部件扩展以填充可用空间,而Flexible用于定义灵活的空间,允许子小部件根据可用空间进行伸缩。
Row(
  children: [
    Expanded(child: Text('Item 1')),
    Expanded(child: Text('Item 2')),
  ],
)
Row(
  children: [
    Flexible(
      flex: 2,
      child: Text('Item 1'),
    ),
    Flexible(
      flex: 1,
      child: Text('Item 2'),
    ),
  ],
)

6. Container 和 Padding:
Container用于包装和布局其他小部件,而Padding用于为子小部件添加填充。
Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Hello, Padding!'),
)
Container(
  margin: EdgeInsets.all(20.0),
  child: Text('Hello, Container!'),
)

7. ListTile 和 ListView:
ListTile用于创建带有图标和文本的列表项,而ListView用于构建可滚动的列表。
ListView(
  children: [
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Item 1'),
    ),
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Item 2'),
    ),
  ],
)

这些小部件提供了基本的布局功能,你可以根据项目的需求和设计目标选择合适的小部件和组合方式来构建灵活的用户界面。


转载请注明出处:http://www.zyzy.cn/article/detail/9593/Flutter