如何动态地连续排列卡片?

时间:2019-07-08 13:48:55

标签: mobile flutter dart row

我想连续放置两张卡,并根据手机大小动态调整它们的大小。如图所示,右电话卡有溢出错误,因为电话尺寸很小。在更大的手机上看起来还不错。

忽略第一个溢出错误

screenshot

我尝试使用Expanded()或Flexible()包装容器,但是它给出了一个错误,提示我的父母正在使用GestureDetector(),但不允许这样做。

Widget _showSecondRow(){
    return new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
           new GestureDetector(
               child: Card(
                  elevation: 1,
                  semanticContainer: true,
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: Container(
                      color: Colors.grey.shade200,
                      padding: EdgeInsets.all(45.0),
                      child: new Column(
                         children: <Widget>[
                                new Icon(Icons.drafts, size: 30.0, color: Colors.black),
                                new Text("Private\nMessages", textAlign: TextAlign.center, style: TextStyle(color: widget.appModel.getPrimaryTextColor, fontSize: 18.0, fontWeight: FontWeight.bold),)
                              ],
                            ),
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                  ),

               )
            ),
            new GestureDetector(
              onTap: () => Navigator.push(context, new MaterialPageRoute(builder: (context) =>
                        new SubscribedScreen()
                        )),
              child: Card(
                elevation: 1.0,
                semanticContainer: true,
                clipBehavior: Clip.antiAliasWithSaveLayer,
                child: Container(
                  color: Colors.grey.shade200,
                  padding: EdgeInsets.all(45.0),
                  child: new Column(
                    children: <Widget>[
                      new Icon(Icons.star, size: 30.0, color: Colors.black),
                      new Text("Subscribed\nThreads", textAlign: TextAlign.center, style: TextStyle(color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.bold), overflow: TextOverflow.ellipsis,)
                              ],
                            ),
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                          ),

                  )
            ),
       ],
   );
}

我希望两张卡都可以动态调整大小,而不管手机的大小和手机的宽度如何。中间是否有间隙没关系。

1 个答案:

答案 0 :(得分:3)

GestureDetectorExpanded中包裹每个Flexible