我想将两张卡片排成一行,并根据手机大小动态调整它们的大小。如图所示,右边的卡由于手机尺寸小,出现溢出错误。在更大的手机上看起来不错。
忽略第一个溢出错误
我曾尝试使用 Expanded() 或 Flexible() 包装容器,但它给出了一个错误,指出我的 parent 正在使用 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),
),
)
),
],
);
}
无论手机大小如何,我都希望这两张卡都能动态调整大小并适合手机的宽度。中间有空隙也没关系。
最佳答案
将每个 GestureDetector
包裹在 Expanded
或 Flexible
中
关于mobile - 如何动态地连续排列卡片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56936373/