如何在Flutter中用卡片创建可拖动的网格布局?

时间:2019-05-24 08:30:54

标签: flutter

我想用Flutter中的可拖动卡创建一个网格视图,该视图连续显示2张卡。但是,我遇到了多个问题。当我尝试修复错误时,您会在下面看到另一条错误链。因此,也许有人已经弄清楚了这是否可行以及如何实现。

谢谢!

我尝试了以下代码:

    Widget workoutCards;
    if (this.widget.workouts.length > 0) {
      workoutCards =
      GridView.builder(
          itemCount: this.widget.workouts.length,
          gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2),
          itemBuilder: (BuildContext context, int index) {
            return new GestureDetector(
                child: Stack(
                    children: <Widget>[
                      _buildWorkoutItem(context, index)]
                ));
          });
    } else {
      workoutCards = Container();
    }
    return workoutCards;
  }

  Widget _buildWorkoutItem(BuildContext context, int index) {
    return Positioned(
        top: widget.offset.dy,
        left: widget.offset.dx,
        child: LongPressDraggable(
          //childWhenDragging: Container(),
          hapticFeedbackOnStart: false,
            child: Card(
              elevation: 5.0,
              child: new Column(
                children: <Widget>[
                  //Image.asset(workouts[index]['image']),
                  Container(
                    margin: EdgeInsets.only(top: 10.0),
                    child: Text(this.widget.workouts[index].title,
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold)),
                  ),
                  ButtonBar(
                    alignment: MainAxisAlignment.center,
                    children: <Widget>[
                      FlatButton(
                          child: Text('Details'),
                          onPressed: () => Navigator.pushNamed<bool>(
                              context, '/workout/' + index.toString()))
                    ],
                  )
                ],
              ),
            ),
            feedback: this.widget));
  }

发生此错误:

I/flutter (19153): The following assertion was thrown during performResize():
I/flutter (19153): Vertical viewport was given unbounded height.
I/flutter (19153): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (19153): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (19153): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (19153): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (19153): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (19153): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (19153): the height of the viewport to the sum of the heights of its children.
I/flutter (19153): 
I/flutter (19153): When the exception was thrown, this was the stack:
I/flutter (19153): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1135:15)
I/flutter (19153): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1188:6)
I/flutter (19153): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1617:9)

0 个答案:

没有答案