【Flutter实现表格上下左右滚动】

【Flutter实现表格上下左右滚动】9.29

一、需求以及设计效果：

• 水平滑动时，表格第一列和第二列固定不动；
• 铅直滑动时，表格第一行固定不动；

一、设计思路

（1）样式绘制：将表格划分为四块；

• 左下两列，绘制成一个表格，只可上下滑动；
• 左上两列，绘制成固定表格，不可滑动；
• 右下多行，绘制为一个表格，可上下滑动，也可左右滑动；
• 右上一行，绘制为一个表格，只可左右滑动；

（2）动效实现：

• 关联列表滑动，完成需求。

二、具体实现

（1）绘制页面布局：

• Container->

• Row->

  //第一列

  • Container(

    • Column(

      // 固定首行—Table

      // 其余行—Table ) )，

  //第二列

  • Container (同上)

 //创建第一列tableRow
 TableRow _buildSingleColumnOne(int index) {
   return TableRow(
       children: [
         _buildSideBox(index == -1 ? '第一列' : "软件质量管理", index == -1),
         _buildSideBox(index == -1 ? '第二列' : "软件质量管理", index == -1),
       ]);
 }
 //创建单个表格
 Widget _buildSideBox(String title, isTitle) {
   return SizedBox(
       height: numRowHeight,
       width: numRowWidth,
       child: Container(
           alignment: Alignment.center,
           decoration: BoxDecoration(
               border: Border(
                   bottom: BorderSide(width: 0.33, color:Colors.black),
                   top: BorderSide(width: 0.33, color:Colors.black),
                   right: BorderSide(width: 0.33, color:Colors.black),
                   left: BorderSide(width: 0.33, color:Colors.black),
               )
           ),
           child: Text(
             title,
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
             style: TextStyle(
                 fontSize: isTitle ? 14 : 12, color: Colors.black),
           ))
   );
 }

 

（二）、滑动控制：上下左右相互关联

三、问题以及解决汇总

1. A RenderFlex overflowed by 357 pixels on the right.

* 原因：子组件的内容超出父组件，但子组件仍然按照真实大小显示。

* 解决：添加弹性组件，如Expanded、ListView

*注意：

①Expanded水平方向（Row）使内容自动适配，不能用于调整垂直Column，若解决参见（https://blog.youkuaiyun.com/kaixuan_dashen/article/details/102308861）

②ListView垂直方向，可使内容自动适配

③Expanded、Flexible只在Row、Column等组件内，不在其他组件内使用。

④Expanded、Flexible两个的默认灵活系数是一样的，但是fit参数不同，Expanded是默认要占满分配的空间的，而Flexible则默认不需要

⑤Scafflod必须封装在MaterialApp中

2.滚动控制：

* 问题：①如何使得表格既能上下滚动，又能左右滚动？

* 解决：给控制横向布局和纵向布局的组件上都加上滑动控制

   Expanded(
      child:
      ListView(//纵向
         controller: thi