flutter 做一个动态列表,每行最左边有个小图标加文字参数,最右边是数据
时间: 2023-12-11 07:02:04 浏览: 30
你可以使用`ListView.builder`来创建一个动态列表,同时在每一行中使用`Row`来布局小图标、文字和数据。以下是一个示例代码:
```dart
ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int index) {
return Row(
children: [
// 左侧小图标和文字
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Icon(Icons.star),
SizedBox(width: 8.0),
Text("参数"),
],
),
),
// 右侧数据
Expanded(
child: Text(data[index]),
),
],
);
},
)
```
其中`data`是一个包含数据的列表,你可以根据自己的需求来修改。在示例中,左侧使用了`Icon`和`Text`来展示小图标和文字,你也可以根据自己的需求来替换。右侧使用了`Expanded`来填充剩余的空间,以展示数据。
相关问题
flutter 实现一个小卡片,左侧是一张图,旁边是一个title,最右边是一个checkbox
好的,以下是一个简单的实现步骤:
1. 在 Flutter 中创建一个 Card Widget。
2. 在 Card Widget 中,使用 Row Widget 来实现左侧图像、中间标题和右侧复选框的布局。
3. 在左侧添加一个 Image Widget 来显示图片。
4. 在中间添加一个 Text Widget 来显示标题。
5. 在右侧添加一个 Checkbox Widget 来显示复选框。
下面是代码示例:
```
Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Image.network(
'https://via.placeholder.com/150',
width: 100,
height: 100,
),
SizedBox(width: 16),
Expanded(
child: Text(
'Card Title',
style: TextStyle(fontSize: 18),
),
),
Checkbox(
value: true,
onChanged: (value) {},
),
],
),
),
);
```
这样就可以创建一个带有图片、标题和复选框的小卡片了。
flutter 实现首页,左右布局,左边一张图片,右边上下布局,两行文字下面是一个按钮,按钮挺好看
可以使用 Flutter 的 Row 和 Column Widget 来实现左右布局和上下布局,然后使用 Container 和 Image Widget 来实现图片和按钮的布局。下面是一个简单的示例代码:
```dart
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Row(
children: [
Container(
width: 150,
height: double.infinity,
child: Image.network(
'https://picsum.photos/200',
fit: BoxFit.cover,
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Title',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10),
Text(
'Subtitle',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: Text('Button'),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(
horizontal: 40,
vertical: 16,
),
textStyle: TextStyle(fontSize: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
],
),
),
),
],
),
);
}
}
```
在这个示例中,我们使用了 Row 和 Column Widget 来实现左右布局和上下布局,使用了 Container 和 Image Widget 来实现图片的显示,使用了 ElevatedButton Widget 来实现按钮的布局。你可以根据自己的需要修改布局和样式。