在Flutter中对齐行内的项目 [英] Align Items inside Row in flutter
本文介绍了在Flutter中对齐行内的项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手.我尝试如下图所示进行设计.但是我无法对齐行"中的项目，也无法使形状像图片中的下面的布局.我曾尝试提供mainAxisAlignment和crossAxisAlignment之类的属性，但无法获得预期的结果，如下图所示.
I am new to flutter. I trying to design as in the image below. But I could not align the items inside the Row and could not give shape to like the layout below in the image. I have tried giving properties like mainAxisAlignment and crossAxisAlignment but could not get the expected result as in the image below.
只有我可以在下面获取图片.
Only I could able to get Image below.
我实现了以下代码:
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),
)),
],
),
],
),
);
推荐答案
Container(
padding: EdgeInsets.all(32.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: [
Container(
padding: EdgeInsets.all( 8.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Image.network(
'http://covertopia.com/wp-content/uploads/2015/05/000227_Alt.jpg'
/*bannerWomenFashion[i]*/,
height: 100,
fit: BoxFit.scaleDown,
)),
Positioned(
top: -12,
left: -12,
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
),
)
],
),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: Colors.red /*CustomColor
.themeSecondary*/
,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10,),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"The Pursuit of Happiness",
style: TextStyle(color: Colors.blueGrey, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 10,),
Row(
children: [
Text("ID: #254217", style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold) /*cartBlueGreyStyle*/),
Spacer(),
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.blueGrey.withOpacity(0.1), spreadRadius: 2),
],
),
child: Center(child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
)
],
),
],
),
),
Container(
width: 30,
height: 30,
margin: EdgeInsets.symmetric(horizontal: 8),
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,size: 16,),
)),
],
),
),
);
这篇关于在Flutter中对齐行内的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
