【发布时间】：2023-02-17 14:33:08
【问题描述】：
我正在使用数据表开发 Flutter App。因为我使用了两个数据表来冻结表的第一列，但我不知道如何冻结表头。
在我的数据表中有很多动态内容，这就是为什么无法使用包。
那么有什么方法可以冻结标题（第一列已经冻结）？
提前致谢！！！
【问题讨论】：
【发布时间】：2023-02-17 14:33:08
【问题描述】：
您可以使用此包，它提供了免费列和标题的选项
【讨论】：
我遇到了同样的问题， 我用了DataTable，
我需要冻结我的前两列并保持水平滚动，我使用 DataTable Widget 和 SingleChildScrollView 做到了这一点，
在这里我展示了两种方法，首先是整个表格可水平滚动，其次是如上所述的工作，
下面的代码会帮助你
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ConfirmationDetailsPage(),
);
}
}
class ConfirmationDetailsPage extends StatefulWidget {
const ConfirmationDetailsPage({super.key});
@override
State<ConfirmationDetailsPage> createState() =>
_ConfirmationDetailsPageState();
}
class _ConfirmationDetailsPageState extends State<ConfirmationDetailsPage> {
Widget myDiveider() {
return const VerticalDivider(
color: Colors.grey,
);
}
final appPrimary = Colors.purple;
TextStyle headerTextStyle = const TextStyle(
color: Colors.black,
fontSize: 13.7,
);
TextStyle lableTextStyle = const TextStyle(
color: Colors.black,
fontSize: 13.2,
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("17 Feb 2023"),
),
body: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15,
vertical: 13,
),
child: Column(
children: [
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Pending Member's List",
),
ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0.0,
disabledBackgroundColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,
),
onPressed: () {},
child: Row(
children: const [
Text("Share"),
SizedBox(width: 5),
Icon(Icons.share),
],
),
),
],
),
// const SizedBox(height: 7),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.transparent,
),
child: DataTable(
horizontalMargin: 10,
headingRowHeight: 45,
headingRowColor:
MaterialStateProperty.all(Colors.transparent),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: appPrimary.withOpacity(0.12),
),
),
dataRowHeight: 40,
columnSpacing: 8,
dividerThickness: 0,
border: TableBorder(
borderRadius: BorderRadius.circular(5),
),
columns: <DataColumn>[
DataColumn(
label: Text(
"No.",
style: headerTextStyle,
),
),
DataColumn(label: myDiveider()),
DataColumn(
label: Text(
"Member",
style: headerTextStyle,
),
),
DataColumn(label: myDiveider()),
DataColumn(
label: Text(
"Status",
style: headerTextStyle,
),
),
DataColumn(label: myDiveider()),
DataColumn(
label: Text(
"Reason",
style: headerTextStyle,
),
),
DataColumn(label: myDiveider()),
// WhatsApp
const DataColumn(
label: SizedBox.shrink(),
),
DataColumn(label: myDiveider()),
// Call
const DataColumn(
label: SizedBox.shrink(),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(
Text(
"1",
style: lableTextStyle,
),
),
DataCell(myDiveider()),
DataCell(
Text(
"Sahil Prajapati",
style: lableTextStyle,
),
),
DataCell(myDiveider()),
const DataCell(
Center(
child: Icon(
Icons.close,
size: 19,
color: Colors.red,
),
),
),
DataCell(myDiveider()),
const DataCell(
Center(
child: Icon(Icons.warning),
),
),
DataCell(myDiveider()),
DataCell(
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints.loose(
const Size.fromWidth(23),
),
onPressed: () {},
icon: const Icon(Icons.mail),
),
),
DataCell(myDiveider()),
DataCell(
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints.loose(
const Size.fromWidth(23),
),
onPressed: () {},
icon: const Icon(Icons.call),
),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(
Text(
"2",
style: lableTextStyle,
),
),
DataCell(myDiveider()),
DataCell(
Text(
"Siddharth Prajapati ",
style: lableTextStyle,
),
),
DataCell(myDiveider()),
const DataCell(
Center(
child: Icon(
Icons.close,
size: 19,
color: Colors.red,
),
),
),
DataCell(myDiveider()),
const DataCell(
Center(
child: Icon(Icons.warning),
),
),
DataCell(myDiveider()),
DataCell(
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints.loose(
const Size.fromWidth(23),
),
onPressed: () {},
icon: const Icon(Icons.mail),
),
),
DataCell(myDiveider()),
DataCell(
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints.loose(
const Size.fromWidth(23),
),
onPressed: () {},
icon: const Icon(Icons.call),
),
),
],
),
],
),
),
),
const SizedBox(height: 20),
Row(
children: [
DataTable(
horizontalMargin: 10,
headingRowHeight: 45,
headingRowColor:
MaterialStateProperty.all(Colors.transparent),
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: appPrimary.withOpacity(0.12)),
bottom: BorderSide(color: appPrimary.withOpacity(0.12)),
left: BorderSide(color: appPrimary.withOpacity(0.12)),
),
),
dataRowHeight: 40,
columnSpacing: 8,
dividerThickness: 0,
columns: [
DataColumn(
label: Text(
"No.",
style: headerTextStyle,
),
),
DataColumn(label: myDiveider()),
DataColumn(
label: Text(
"Member",
style: headerTextStyle,
),
),
DataColumn(label: myDiveider()),
],
rows: [
DataRow(
cells: [
DataCell(
Text(
"2",
style: lableTextStyle,
),
),
DataCell(myDiveider()),
DataCell(
Text(
"Siddharth Prajapati ",
style: lableTextStyle,
),
),
DataCell(myDiveider()),
],
),
],
),
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
horizontalMargin: 10,
headingRowHeight: 45,
headingRowColor:
MaterialStateProperty.all(Colors.transparent),
decoration: BoxDecoration(
// borderRadius: const BorderRadius.only(
// topRight: Radius.circular(10),
// bottomRight: Radius.circular(10),
// ),
border: Border(
top: BorderSide(color: appPrimary.withOpacity(0.12)),
bottom:
BorderSide(color: appPrimary.withOpacity(0.12)),
right:
BorderSide(color: appPrimary.withOpacity(0.12)),
),
),
dataRowHeight: 40,
columnSpacing: 8,
dividerThickness: 0,
columns: [
DataColumn(
label: Text(
"Status",
style: headerTextStyle,
),
),
DataColumn(label: myDiveider()),
DataColumn(
label: Text(
"Reason",
style: headerTextStyle,
),
),
DataColumn(label: myDiveider()),
// WhatsApp
const DataColumn(
label: SizedBox.shrink(),
),
DataColumn(label: myDiveider()),
// Call
const DataColumn(
label: SizedBox.shrink(),
),
],
rows: [
DataRow(
cells: [
const DataCell(
Center(
child: Icon(
Icons.close,
size: 19,
color: Colors.red,
),
),
),
DataCell(myDiveider()),
const DataCell(
Center(
child: Icon(Icons.warning),
),
),
DataCell(myDiveider()),
DataCell(
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints.loose(
const Size.fromWidth(23),
),
onPressed: () {},
icon:const Icon(Icons.mail),
),
),
DataCell(myDiveider()),
DataCell(
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints.loose(
const Size.fromWidth(23),
),
onPressed: () {},
icon: const Icon(Icons.call),
),
),
],
),
],
),
),
)
],
),
],
),
),
);
}
}
也许这会对你有所帮助！谢谢
【讨论】：