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 组件大全