我想创建一个应用优惠券节,在这一节中我使用了一个文本字段和按钮,我想设置边框只有三个侧面左,顶部和底部和右侧将是一个按钮。
这是我的准则。
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20, top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8)),
child: Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: MyColor.darkGreyColor,
width: 1.0,
),
top: BorderSide(
color: MyColor.darkGreyColor,
width: 1.0,
),
bottom: BorderSide(
color: MyColor.darkGreyColor,
width: 1.0,
),
),
),
height: 44,
child: TextFormField(
// keyboardType: textInputType,
// focusNode: myFocusNode,
// controller: controller,
style: textStyleWith12400(MyColor.blackColor),
onChanged: (value) {
// if (value.length == maxLength) {
// FocusScope.of(context).unfocus();
// }
},
// maxLength: maxLength ,
decoration: InputDecoration(
filled: true,
fillColor: MyColor.whiteColor,
contentPadding:
EdgeInsets.only(right: 12, top: 12, left: 12),
isCollapsed: true,
hintText: "Apply Coupon",
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
style: BorderStyle.none,
width: 2,
// color: myFocusNode.hasFocus || controller.text.isNotEmpty
// ? MyColor.darkGreyColor
// : MyColor.greyColor,
color: MyColor.greyColor),
borderRadius: BorderRadius.circular(8.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
style: BorderStyle.none,
width: 2,
// color: myFocusNode.hasFocus || controller.text.isNotEmpty
// ? MyColor.darkGreyColor
// : MyColor.greyColor,
color: MyColor.greyColor),
borderRadius: BorderRadius.circular(8.0),
),
),
),
),
)),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {});
},
child: ClipRRect(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(8),
bottomRight: Radius.circular(8),
),
child: Container(
height: 44,
width: 100,
decoration: BoxDecoration(
color: MyColor.primaryRedColor,
border: Border(
left: BorderSide(
color: MyColor.redLightColor,
width: 1.0,
),
),
),
child: Center(
child: Text(
'APPLY',
style: textStyleWith12500(
MyColor.whiteColor,
),
),
),
)),
),
),
],
),
)
这是我希望UI的外观:
这是我目前拥有的:
2条答案
按热度按时间fcipmucu1#
1.删除
Row
中的第二个Expanded
小部件。1.将
Row
的mainAxisAlignment
更改为start
(或全部卸下)。可以肯定的是,这将迫使您最左边的
Expanded
小部件占据整个空间,并按下您的按钮,因为你的愿望。1l5u6lss2#
这个代码对你有用!试试这个