flutter 非常用组件整理 第一篇

在Flutter中，有许多种类的组件，可以用来构建应用程序的UI。这些组件可以根据它们的功能和用途被分为不同的类别。以下是一些常见的组件类别：

1. 布局组件：提供不同的布局方式，如Row, Column, Container, Padding, Center等。
2. 显示组件：用于显示不同类型的数据，如Text, Image等。
3. 按钮和表单输入组件：如RaisedButton, FlatButton, IconButton, Checkbox, Radio, Switch, Slider, TextField等。
4. 导航组件：如BottomNavigationBar, TabBar, Navigator等，用于处理应用内的导航。
5. 整个应用可复用的自定义组件：可以根据需要自定义创建，如ListView, GridView, Card等。

以下是一些简单的实例代码，展示了如何在Flutter中使用这些组件：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Components Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello, World!'),
              SizedBox(height: 20.0), // 空间间隔
              Icon(Icons.android),
              SizedBox(height: 20.0),
              RaisedButton(
                child: Text('Press Me'),
                onPressed: () => print('Button Pressed'),
              ),
              SizedBox(height: 20.0),
              Checkbox(
                value: true,
                onChanged: (bool value) {},
              ),
              SizedBox(height: 20.0),
              Slider(
                value: 0.5,
                onChanged: (double value) {},
              ),
              SizedBox(height: 20.0),
              TextField(
                decoration: InputDecoration(hintText: 'Enter text'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个例子展示了如何在一个Column中嵌套多种组件，从显示文本到显示图标，按钮，复选框，滑块和文本输入框。这些组件可以根据需要以更复杂的方式进行布局和样式设置。