Flutter Widget 组件大全

1. Text Widget

Text Widget 用于显示一段文本，可以设置字体样式、颜色、对齐方式等。

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 18.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

2. Image Widget

Image Widget 用于显示图片，可以加载本地图片或网络图片。

Image.network('https://example.com/images/example.jpg')

// or

Image.asset('assets/images/example.jpg')

3. Container Widget

Container Widget 用于在其内部绘制子widget，并提供了设置边距、背景颜色、边框等样式的属性。

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.circular(5.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        offset: Offset(0.0, 2.0),
        blurRadius: 6.0,
      ),
    ],
  ),
  child: Text('This is a container'),
)

4. Row and Column Widgets

Row Widget 用于在水平方向排列子widget，Column Widget 用于在垂直方向排列子widget。

Row(
  children: [
    Icon(Icons.check),
    Text(
      'Checked',
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
  ],
)

// or

Column(
  children: [
    Text('Name'),
    Text('John Doe'),
  ],
)

5. ListView Widget

ListView Widget 用于在一个滚动视图中排列子widget，可以根据需要进行水平或垂直滚动。

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

// or

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Text(items[index]);
  },
)

6. RaisedButton Widget

RaisedButton Widget 用于创建一个凸起的按钮，可以设置按钮的文字、颜色、边框等。

RaisedButton(
  onPressed: () {},
  child: Text('Click me'),
  color: Colors.blue,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
)

7. TextField Widget

TextField Widget 用于接收用户的输入，可以设置提示文字、自动校验等功能。

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
    icon: Icon(Icons.person),
  ),
)

8. FlutterLogo Widget

FlutterLogo Widget 用于显示 Flutter 的徽标。

FlutterLogo(
  size: 100.0,
)

总结

以上是 Flutter 中的一些常用的 Widget 组件，通过组合这些组件可以创建出丰富多样的应用界面。希望这篇文章对你在学习 Flutter 中的组件使用有所帮助！

本文来自极简博客，作者：幽灵船长，转载请注明原文链接：Flutter Widget 组件大全