flutter:如何固定按钮宽度和容器文本框边框?

3mpgtkmj  于 2023-02-25  发布在  Flutter
关注(0)|答案(2)|浏览(131)

我想创建一个应用优惠券节,在这一节中我使用了一个文本字段和按钮,我想设置边框只有三个侧面左,顶部和底部和右侧将是一个按钮。
这是我的准则。

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的外观:

这是我目前拥有的:

fcipmucu

fcipmucu1#

1.删除Row中的第二个Expanded小部件。
1.将RowmainAxisAlignment更改为start(或全部卸下)。
可以肯定的是,这将迫使您最左边的Expanded小部件占据整个空间,并按下您的按钮,因为你的愿望。

1l5u6lss

1l5u6lss2#

这个代码对你有用!试试这个

Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.grey,
                ),
                borderRadius: BorderRadius.circular(5),
              ),
              height: 50,
              margin: EdgeInsets.symmetric(horizontal: 30),
              child: ClipRRect(
                child: Expanded(
                  child: Row(
                    children: [
                      Expanded(
                          child: TextFormField(
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            contentPadding: EdgeInsets.only(left: 10)),
                      )),
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.redAccent,
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(5),
                              bottomRight: Radius.circular(5)),
                        ),
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(horizontal: 8),
                        child: InkWell(
                            child: Text(
                          'Apply Coupon',
                          style: TextStyle(color: Colors.white),
                        )),
                      )
                    ],
                  ),
                ),
              ),
            ).   '''

相关问题