Flutter Widget目录

Flutter 框架提供了丰富的组件库，这些组件被称为 Widgets。Widgets 是构建用户界面的基本单元，它们可以是简单的按钮、文本框，也可以是复杂的布局和动画效果。本章将详细介绍 Flutter 中常用的 Widget 类型及其用法。

基础 Widget

容器 Container

容器是 Flutter 中最常用的 Widget 之一，它允许你设置子元素的样式，如背景颜色、边距、填充等。

Container(
  color: Colors.red,
  padding: EdgeInsets.all(10),
  child: Text('Hello World'),
)

文本 Text

文本 Widget 用于显示文本内容。你可以通过多种方式自定义文本的样式，如字体大小、颜色、对齐方式等。

Text(
  'Hello World',
  style: TextStyle(fontSize: 20, color: Colors.white),
  textAlign: TextAlign.center,
)

图像 Image

图像 Widget 用于显示图片资源。你可以从网络或本地文件加载图片。

Image.network(
  'https://example.com/image.jpg',
  width: 100,
  height: 100,
)

按钮 Button

按钮用于响应用户的点击操作。Flutter 提供了多种按钮类型，如 RaisedButton、FlatButton 和 OutlineButton。

RaisedButton(
  onPressed: () {},
  child: Text('Click Me'),
)

布局 Widget

列表 Layout

列表用于排列多个子元素，Flutter 提供了多种布局方式，包括行 Row 和列 Column。

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

对齐 Alignment

对齐 Widget 用于控制子元素的位置。常见的对齐 Widget 包括 Align 和 Center。

Align(
  alignment: Alignment.topRight,
  child: Text('Top Right'),
)

空间分隔 Spacing

空间分隔 Widget 用于控制元素之间的间距。常用的有 SizedBox 和 Padding。

Padding(
  padding: EdgeInsets.all(10),
  child: Text('Padding Example'),
)

输入 Widget

文本输入 TextField

文本输入 Widget 用于接收用户输入的文本信息。

TextField(
  decoration: InputDecoration(hintText: 'Enter your name'),
)

单选按钮 Radio

单选按钮用于让用户在一组选项中选择一个选项。

// www.javascriptcn.com code example
Radio(
  value: 1,
  groupValue: _groupValue,
  onChanged: (val) {
    setState(() {
      _groupValue = val;
    });
  },
)

复选框 Checkbox

复选框用于让用户在多个选项中选择一个或多个选项。

Checkbox(
  value: _isChecked,
  onChanged: (val) {
    setState(() {
      _isChecked = val;
    });
  },
)

导航与路由 Navigation & Routing

路由 Navigator

Navigator 用于管理应用中的页面跳转。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NextPage()),
);

页面切换 PageView

PageView 用于实现滑动切换页面的效果。

PageView(
  children: [
    Text('Page 1'),
    Text('Page 2'),
    Text('Page 3'),
  ],
)

动画 Animation

基本动画 Basic Animation

基本动画用于创建简单的动画效果，如淡入淡出、平移等。

AnimatedOpacity(
  opacity: _opacity,
  duration: Duration(seconds: 1),
  child: Text('Animated Opacity'),
)

自定义动画 Custom Animation

自定义动画允许开发者完全控制动画过程，通常需要使用 AnimationController。

// www.javascriptcn.com code example
class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform.scale(
          scale: _controller.value,
          child: Text('Custom Animation'),
        );
      },
    );
  }
}

其他常用 Widget

列表 ListView

列表 Widget 用于展示一系列条目，支持滚动和动态加载数据。

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

下拉菜单 DropdownMenu

下拉菜单 Widget 用于提供一系列选项供用户选择。

// www.javascriptcn.com code example
DropdownButton<String>(
  items: <String>['Option 1', 'Option 2', 'Option 3'].map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
)

以上是 Flutter 中一些常用的 Widget 及其用法。通过这些 Widget 的组合使用，你可以构建出复杂且美观的用户界面。希望这些内容对你有所帮助！