【发布时间】:2021-01-28 02:16:33
【问题描述】:
我是新来的颤振。我试图设计如下图。但我无法对齐 Row 内的项目,也无法像图片中下面的布局一样塑造形状。我尝试提供 mainAxisAlignment 和 crossAxisAlignment 等属性,但无法获得如下图所示的预期结果。
只有我能得到下面的图片。
我的代码实现如下:
Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(
Radius.circular(20))),
child: Image.network(
bannerWomenFashion[i],
height: 100,
width: 100,
fit: BoxFit.scaleDown,
)),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: CustomColor
.themeSecondary,
fontSize: 18,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text(
"The Pursuit of Happiness",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 20,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("ID: #254217",
style: cartBlueGreyStyle),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color:
Colors.grey,
spreadRadius: 2),
],
),
child: Center(
child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
),
],
)),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white,
spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear,
color: Colors.blueGrey),
)),
],
),
],
),
);
【问题讨论】: