flutter之横-竖列表(web)

最新推荐文章于 2024-04-17 22:06:15 发布

gjlmoon

最新推荐文章于 2024-04-17 22:06:15 发布

阅读量235

点赞数

分类专栏： flutter开发文章标签： flutter 前端 android

本文链接：https://blog.csdn.net/gjlmoon/article/details/129135896

版权

flutter开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了在FlutterWeb开发中如何处理响应式布局下列表超出界面的问题。通过实现一个VHListView类，该类支持水平和垂直滚动的列表，并确保标题和内容的滚动保持同步。关键代码涉及ScrollController的使用来同步两个独立列表的滚动位置。

摘要由CSDN通过智能技术生成

flutter之横-竖列表(web)

适用于flutter WEB开发时候界面缩小而导致的超出界面

前言

由于 flutter web属于响应式布,所以在开发的时候难免会遇到组件超标的问题

代码

import 'package:flutter/material.dart';

class VHListView extends StatefulWidget {
  final List<List<Widget>> rowchilden;
  final List<Widget> titleList;
  final double titleHeight;
  final double itemWidth;
  final double itemHight;
  final EdgeInsets padding;
  VHListView({
    super.key,
    required this.titleHeight,
    required this.itemWidth,
    required this.itemHight,
    required this.padding,
    required this.titleList,
    required this.rowchilden,
  });

  @override
  State<VHListView> createState() => _VHListViewState();
}

class _VHListViewState extends State<VHListView> {
  final ScrollController _titleController = ScrollController();
  final ScrollController _contentController = ScrollController();
  @override
  void initState() {
    _titleController.addListener(_updateContent);
    _contentController.addListener(_updateTitle);
    super.initState();
  }

  void _updateTitle() {
    if (_titleController.offset != _contentController.offset) {
      _titleController.jumpTo(_contentController.offset);
    }
  }

  void _updateContent() {
    if (_contentController.offset != _titleController.offset) {
      _contentController.jumpTo(_titleController.offset);
    }
  }

  @override
  void dispose() {
    _titleController.removeListener(_updateContent);
    _contentController.removeListener(_updateTitle);
    super.dispose();
  }

  Container _buildTitleContainer(int i) {
    return Container(
      decoration:
          BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
      alignment: Alignment.center,
      width: widget.itemWidth,
      height: widget.titleHeight,
      child: widget.titleList[i],
    );
  }

  _buildRightTitle() {
    List<Widget> list = [];
    for (int i = 1; i < widget.titleList.length; i++) {
      list.add(_buildTitleContainer(i));
    }
    return list;
  }

  _buildRightContent(int index) {
    List<Widget> list = [];
    for (var i = 1; i < widget.rowchilden[index].length; i++) {
      list.add(Container(
        alignment: const Alignment(0, 0),
        decoration:
            BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
        width: widget.itemWidth,
        height: widget.itemHight,
        child: widget.rowchilden[index][i],
      ));
    }

    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: widget.padding,
      child: Column(
        children: [
          Row(
            children: [
              Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: 1)),
                width: widget.itemWidth,
                height: widget.titleHeight,
                alignment: Alignment.center,
                child: Text('名称', style: TextStyle(color: Colors.green)),
              ),
              //生成标题
              Expanded(
                child: Container(
                  width: widget.rowchilden.length * widget.itemWidth,
                  child: SingleChildScrollView(
                    controller: _titleController,
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: _buildRightTitle(),
                    ),
                  ),
                ),
              ),
            ],
          ),
          Expanded(
              child: SingleChildScrollView(
            child: Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: widget.itemWidth,
                      child: ListView.builder(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return GestureDetector(
                              onTap: () {},
                              child: Container(
                                alignment: const Alignment(0, 0),
                                decoration: BoxDecoration(
                                    border: Border.all(
                                        color: Colors.black, width: 1)),
                                width: widget.itemWidth,
                                height: widget.itemHight,
                                child: Container(
                                  child: widget.rowchilden[index][0],
                                ),
                              ));
                        },
                        itemCount: widget.rowchilden.length,
                      ),
                    ),
                    Expanded(
                        child: SingleChildScrollView(
                      controller: _contentController,
                      scrollDirection: Axis.horizontal,
                      child: Container(
                        width:
                            (widget.rowchilden.length + 1) * widget.itemWidth,
                        child: ListView.builder(
                          itemCount: widget.rowchilden.length,
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemBuilder: (context, index) {
                            return Row(
                              children: _buildRightContent(index),
                            );
                          },
                        ),
                        // ),
                      ),
                    ))
                  ],
                ),
              ],
            ),
          ))
        ],
      ),
    );
  }
}