Flutter开发入门——Widget和常用组件

在Flutter中，Widget是构建用户界面的基本单位。每个Widget都是一个类，可以根据需要创建自定义Widget。

以下是一些常用的Widget和它们的简单用法：

1. Text：显示文本信息。

Text('Hello, Flutter!'),

2. Container：一个简单的容器，可以用于布局和添加背景色、边框等。

Container(
  color: Colors.blue,
  child: Text('Hello, Flutter!'),
),

3. Row和Column：用于水平或垂直排列子Widget。

Row(
  children: <Widget>[
    Text('Row Item 1'),
    Text('Row Item 2'),
  ],
),
 
Column(
  children: <Widget>[
    Text('Column Item 1'),
    Text('Column Item 2'),
  ],
),

4. Image：显示图片。

Image.network('https://example.com/image.png'),

5. RaisedButton和FlatButton：用于点击事件的按钮。

RaisedButton(
  onPressed: () { print('RaisedButton pressed'); },
  child: Text('Raised Button'),
),
 
FlatButton(
  onPressed: () { print('FlatButton pressed'); },
  child: Text('Flat Button'),
),

6. ListView：创建一个可滚动的列表。

ListView(
  children: <Widget>[
    ListTile(title: Text('List Item 1')),
    ListTile(title: Text('List Item 2')),
    // ...更多列表项
  ],
),

7. Stack：堆叠Widget，可以用于定位和叠加效果。

Stack(
  children: <Widget>[
    Text('Hello, Flutter!'),
    Positioned(
      right: 10.0,
      bottom: 10.0,
      child: Text('New Text'),
    ),
  ],
),

8. AppBar：用于应用的顶部导航栏。

AppBar(
  title: Text('AppBar Title'),
),

9. Expanded：可以用于Row或Column中，用于分配可用空间。

Row(
  children: <Widget>[
    Expanded(
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
),

10. Scaffold：提供有默认参数的Material Design布局结构。

Scaffold(
  appBar: AppBar(title: Text('Sample App')),
  body: Text('Sample body'),
),

这些Widget是开发者在Flutter中最常接触和使用的。Flutter提供丰富的Widget库，可以根据需要创建自定义Widget。