1. MaterialApp 和 Scaffold
MaterialApp 是一个包含Material Design风格的Flutter应用的顶级小部件。Scaffold 是一个提供基本的应用程序布局结构的小部件，包含了应用程序的顶栏、底栏和主要内容区域。
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My Flutter App'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
),
));
}
2. Text
Text 小部件用于显示文本。
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)
3. Image
Image 小部件用于显示图像。
Image.network('https://example.com/image.jpg')
4. Container
Container 小部件用于包装和布局其他小部件，提供对宽度、高度、边距、填充等的控制。
Container(
width: 200,
height: 200,
color: Colors.blue,
child: Text('Container Example', style: TextStyle(color: Colors.white)),
)
5. Row 和 Column
Row 和 Column 小部件用于水平和垂直排列子小部件。
Row(
children: [
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
],
)
Column(
children: [
Text('First item'),
Text('Second item'),
Text('Third item'),
],
)
6. ListView
ListView 小部件用于构建可滚动的列表。
ListView(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
)
7. GestureDetector
GestureDetector 小部件用于捕获用户手势，如点击、滑动等。
GestureDetector(
onTap: () {
print('Container tapped');
},
child: Container(
width: 200,
height: 200,
color: Colors.green,
child: Center(child: Text('Tap me')),
),
)
以上只是Flutter中一些基本的小部件和布局方式。Flutter提供了丰富的小部件库，允许你创建复杂且漂亮的用户界面。你可以根据项目需求选择合适的小部件和布局方式来构建用户界面。详细的文档和示例可以在[Flutter官方文档](https://flutter.dev/docs)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/9586/Flutter