前言

现在flutter的Widget还是满足不了复杂项目的需求，小编拿到项目的需求，找了三天，网上对这块还是空白的，所以就只能自己造轮子了，现在写这篇博客，和大家分享一下

准备工具

这套课程是采用VScode进行开发的。当前在此之前请准备好Flutter开发环境，我这里就不进行讲解了。

轮子实现结果

点击+号，则灰色是列表就会出现，形成一个新的表格

涉及到的插件

provide: ^1.0.2 状态管理插件

小实例流程

首先编写provide文件

设置一个变量来控制开关的闭合，一个函数来改变变量的值

import 'package:flutter/material.dart';

class isOpenProvide with ChangeNotifier{
  bool isopen=false;

  open(){
    isopen=!isopen;
    print(isopen);
    notifyListeners();
  }

}

写+号的动作

 Widget _operation(String title,BuildContext context){
    return Container(
      width: 150,
      margin: EdgeInsets.only(left: 10.0),
      child: InkWell(
        onTap: ()async{
         await Provide.value<isOpenProvide>(context).open();
         _addTable(context);
        },
        child: Text(
          title,
        ),
      )
    );
  }

增加行

Widget _addTable(BuildContext context){
    
    if (Provide.value<isOpenProvide>(context).isopen) {
      return _newList(context);
    } else{
      return Text('点击加载');
    }
  }
  //新增加行的颜色和数据
Widget _newList(BuildContext context){
    return Row(
      children: <Widget>[
        Container(
          color: Colors.grey,
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  _titleContext('操作'),
                  _titleContext('价格'),
                  _titleContext('数量'),
                ],
              ),
              Row(
                children: <Widget>[
                  _operation('+',context),
                  _context('100'),
                  _context('1000'),
                ],
              ),
            ],
          ),
        )
      ],
    );
  }

具体的布局

这里的数据都是死数据，之后接入项目的时候，就可以使用后端接口传过来的数据了

/**
 * 垂直listView
 */
class MyApp extends StatelessWidget {

  bool isOpen=false;

  @override
  Widget build(BuildContext context) {
    final title = 'list';
    return new MaterialApp(
      title: title,
      home: Provide<isOpenProvide>(
        builder: (context,child,val){
          return new Scaffold(
            appBar: new AppBar(
              title: new Text(title),
            ),
            body: new Center(
              child: new ListView(
                //控制方向 默认是垂直的
              scrollDirection: Axis.horizontal,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          _titleContext('操作'),
                          _titleContext('价格'),
                          _titleContext('数量'),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          _operation('+',context),
                          _context('100'),
                          _context('1000'),
                        ],
                      ),
                      _addTable(context),
                      Row(
                        children: <Widget>[
                          _titleContext('操作'),
                          _titleContext('价格'),
                          _titleContext('数量'),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          _operation('+',context),
                          _context('100'),
                          _context('1000'),
                        ],
                      ),
                    ],
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }

这个例子十分的简单，大家可以到我的github的table下载源码，直接看，希望可以帮助到大家，有帮助的话，请给我一个赞和一个star，编写不易。