Flutter常用组件-布局组件

在Flutter中，常用的布局组件包括Container, Padding, Center, Align, Column, Row, Stack, IndexedStack, ListView, GridView 等。以下是一些简单的实例代码：

// Container
Container(
  color: Colors.blue,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  child: Text('Container Example'),
);
 
// Padding
Padding(
  padding: EdgeInsets.all(10),
  child: Container(color: Colors.green, child: Text('Padding Example')),
);
 
// Center
Center(
  child: Container(color: Colors.yellow, child: Text('Center Example')),
);
 
// Align
Align(
  alignment: Alignment.centerRight,
  child: Container(color: Colors.orange, child: Text('Align Example')),
);
 
// Column
Column(
  children: <Widget>[
    Text('Column Example 1'),
    Text('Column Example 2'),
  ],
);
 
// Row
Row(
  children: <Widget>[
    Text('Row Example 1'),
    Text('Row Example 2'),
  ],
);
 
// Stack
Stack(
  alignment: AlignmentDirectional.bottomCenter,
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.blue, alignment: Alignment.center, child: Text('Stack Example')),
  ],
);
 
// IndexedStack
IndexedStack(
  index: 1,
  children: <Widget>[
    Text('IndexedStack Example 1'),
    Text('IndexedStack Example 2'),
  ],
);
 
// ListView
ListView(
  children: <Widget>[
    ListTile(title: Text('ListView Item 1')),
    ListTile(title: Text('ListView Item 2')),
  ],
);
 
// GridView
GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    Container(color: Colors.green, child: Text('GridView Item 1')),
    Container(color: Colors.green, child: Text('GridView Item 2')),
  ],
);

这些组件可以帮助您构建复杂的布局，并提供了丰富的属性来控制子组件的位置、对齐和大小。