我使用行,列和SingleChildScrollView制作自定义dataTable。这里我要求是头必须是粘性的,表行必须是双向滚动的。我得到了垂直滚动,但是当我水平滚动时,小部件会无限地移动到屏幕之外。有任何解决方案或建议最好的插件/包flutter web.(我正在制作管理面板与扑网).
我想要这样的table。
I tried to datatable,datatable2,PaginatedDataTable but problem is this table's row elements take same width and, i need row elements width as per content have it, and row element must have take a widget so that i can add Text,button or as per need in table.
代码
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class MyCustomDataTable extends StatelessWidget {
const MyCustomDataTable({super.key});
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(),
body: Container(
height: size.height,
width: size.width,
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
width: 0.45,
),
),
padding: const EdgeInsets.all(10),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
dragStartBehavior: DragStartBehavior.down,
clipBehavior: Clip.none,
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: List.generate(
30,
(index) => Container(
width: 80,
height: 30,
margin: const EdgeInsets.only(right: 20),
color: Colors.purple,
child: Center(
child: Text("${1 + index}"),
),
),
).toList(),
),
Row(
children: List.generate(
30,
(index) => Container(
width: 80,
height: 30,
margin: const EdgeInsets.only(right: 20),
color: Colors.purple,
child: Center(
child: Text("${1 + index}"),
),
),
).toList(),
),
const SizedBox(height: 20),
Flexible(
child: SizedBox(
width: double.maxFinite,
child: ListView.builder(
itemCount: 50,
shrinkWrap: true,
itemBuilder: (context, index) {
return Row(
children: List.generate(
30,
(index) => Container(
width: 80,
height: 30,
margin: const EdgeInsets.only(right: 20),
color: Colors.purple.withOpacity(index / 30),
child: Center(
child: Text("${1 + index}"),
),
),
).toList(),
);
},
),
),
),
],
),
),
),
);
}
}
1条答案
按热度按时间agyaoht71#
你试过syncfusion_flutter_datagrid吗?它可以帮助您创建和自定义具有不同功能和绑定的复杂数据表。