带有固定标题和固定行标题的Flutter/Dart Datatable或Sliver

91zkwejq  于 2023-11-14  发布在  Flutter
关注(0)|答案(2)|浏览(163)

因此,我想为Flutter应用程序创建一个数据视图,该视图包含一个数据表或数据片(或任何东西)在垂直滚动时有固定的标题,在水平滚动时也有固定的行标题。我试着摆弄data_table_2table_sticky_headers插件,但它们并不完全符合我的要求。我希望有人能给我指出正确的方向或帮助想出一个解决方案。
这里有一个GIF图像显示我想实现.
Data View Idea

yhxst69z

yhxst69z1#

我想明白了。实际上它非常简单,使用嵌套的Stack和SingleChildScrollView。不需要插件。
这里有一个链接到示例源代码,如果有人感兴趣.
https://github.com/jstoyles/flutter_data_view_idea

mwecs4sa

mwecs4sa2#

在我的情况下,我这样处理。也许这将有助于某人

RawScrollbar(
                  radius: Radius.circular(16.r),
                  thickness: 6,
                  trackVisibility: true,
                  scrollbarOrientation: ScrollbarOrientation.bottom,
                  thumbColor: KColor.white.color,
                  child: SingleChildScrollView(
                    physics: BouncingScrollPhysics(),
                    scrollDirection: Axis.horizontal,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.only(
                            left: 20.w,
                          ),
                          child: Container(
                            padding: EdgeInsets.all(10.w),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(
                                Radius.circular(4.r),
                              ),
                              color: KColor.tableHader.color,
                            ),
                            child: Row(
                              children: List.generate(
                                  controller.tableHeader!.length, (index) {
                                if (index == 0) {
                                  return GlobalText(
                                    str: "",
                                    fontWeight: FontWeight.w500,
                                  );
                                } else {
                                  return Container(
                                    margin: index == 4
                                        ? EdgeInsets.only(left: 65.w)
                                        : EdgeInsets.symmetric(
                                            horizontal: 30.w),
                                    child: GlobalText(
                                      str: controller.tableHeader![index]
                                          .toString(),
                                      color: KColor.black.color,
                                      fontSize: 12,
                                      maxLines: 2,
                                      textAlign: TextAlign.center,
                                      fontWeight: FontWeight.w500,
                                      fontFamily: AppConstant.AROBIA_BOOK.key,
                                      decoration: TextDecoration.underline,
                                    ),
                                  );
                                }
                              }),
                            ),
                          ),
                        ),
                        Expanded(
                          child: SingleChildScrollView(
                            child: Theme(
                              data: ThemeData().copyWith(
                                dividerColor: KColor.white.color,
                              ),
                              child: Column(
                                children: [
                                  Padding(
                                    padding:
                                        EdgeInsets.symmetric(horizontal: 10.w),
                                    child: DataTable(
                                      horizontalMargin: 0,
                                      showBottomBorder: true,
                                      dataRowColor: MaterialStateProperty.all(
                                        KColor.white.color,
                                      ),
                                      headingRowColor:
                                          MaterialStateProperty.all(
                                        KColor.white.color,
                                      ),
                                      headingRowHeight: 0.h,
                                      dataRowHeight: 60.h,
                                      showCheckboxColumn: false,
                                      decoration: BoxDecoration(
                                        color: KColor.white.color,
                                      ),
                                      columnSpacing: 40.w,
                                      columns: List.generate(
                                        controller.tableHeader!.length,
                                        (index) => DataColumn(
                                          label: SizedBox.shrink(),
                                        ),
                                      ),
                                      rows: List.generate(
                                          controller.tableRow!.length, (index) {
                                        return TransactionHistoryTableRow
                                            .tableDataRow(
                                          context: context,
                                          index: index,
                                          tableRow: controller.tableRow,
                                        );
                                      }),
                                    ),
                                  ),
                                  SizedBox(
                                    height: 20.h,
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );

字符串

相关问题