可Flutter数据:在水平滚动视图中将小部件滚动到屏幕外

xqnpmsa8  于 2023-05-18  发布在  Flutter
关注(0)|答案(1)|浏览(130)

我使用行,列和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(),
                      );
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
agyaoht7

agyaoht71#

你试过syncfusion_flutter_datagrid吗?它可以帮助您创建和自定义具有不同功能和绑定的复杂数据表。

相关问题