使用flutter设计一个页面,页面部分是一个数据列表,分为四列,列标题分别是 项目、浓度、时间、吸光度,表格距离四周30,被一个四周30的圆角矩形包围,矩形背景为灰色,矩形距离四周为30,底部设计四个按钮,可以对表格进行增删改查
时间: 2024-02-26 15:57:17 浏览: 66
好的,这是一个比较具体的设计需求,需要进行代码实现。以下是一个简单的示例代码,实现了上述设计需求:
```dart
import 'package:flutter/material.dart';
class DataListPage extends StatefulWidget {
@override
_DataListPageState createState() => _DataListPageState();
}
class _DataListPageState extends State<DataListPage> {
List<List<String>> dataList = [
['项目1', '浓度1', '时间1', '吸光度1'],
['项目2', '浓度2', '时间2', '吸光度2'],
['项目3', '浓度3', '时间3', '吸光度3'],
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('数据列表'),
),
body: Container(
margin: EdgeInsets.all(30),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(30),
),
child: Column(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Text('项目')),
Expanded(child: Text('浓度')),
Expanded(child: Text('时间')),
Expanded(child: Text('吸光度')),
],
),
),
Expanded(
child: ListView.builder(
itemCount: dataList.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Text('${dataList[index][0]}')),
Expanded(child: Text('${dataList[index][1]}')),
Expanded(child: Text('${dataList[index][2]}')),
Expanded(child: Text('${dataList[index][3]}')),
],
),
);
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
// TODO: 添加数据
},
child: Text('添加'),
),
ElevatedButton(
onPressed: () {
// TODO: 修改数据
},
child: Text('修改'),
),
ElevatedButton(
onPressed: () {
// TODO: 删除数据
},
child: Text('删除'),
),
ElevatedButton(
onPressed: () {
// TODO: 查询数据
},
child: Text('查询'),
),
],
),
],
),
),
);
}
}
```
需要注意的是,示例代码中的数据列表是一个硬编码的二维数组,实际应用中需要根据实际情况进行数据源的定义和管理。另外,四个按钮的功能需要根据需求进行实现。
阅读全文