如何在Flutter中的文本欄位上給出非常具體的邊框？

我在這里有點掙扎，尤其是在使用 TextFormFields 和/或 DropdownButtons 時。如何制作像影像中的邊框？

這是我到目前為止所擁有的：

Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Color.fromRGBO(197, 197, 197, 1),
                      ),
                      borderRadius: BorderRadius.all(
                        Radius.circular(10),
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 5, bottom: 5, right: 5),
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                              width: 3.0,
                              color: Colors.red,
                            ),
                          ),
                        ),
                        child: SizedBox(
                          width: 300,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 8.0),
                            child: DropdownButtonFormField(
                              decoration: InputDecoration(
                                enabledBorder: 
                                 UnderlineInputBorder(
                                  borderSide:
                                      BorderSide(color: 
                                       Colors.transparent),
                                ),
                                focusedBorder: 
                                 UnderlineInputBorder(
                                  borderSide:
                                      BorderSide(color: 
                                       Colors.transparent),
                                ),
                              ),
                              ...
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),

編輯：洗掉底部邊框

編輯2：這是我能得到的最接近的

uj5u.com熱心網友回復：

InputBorder.none全部使用DropdownButtonFormField并在頂層容器上使用裝飾

關注這個小部件

class FA extends StatelessWidget {
  const FA({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
            border: Border.all(
              color: Color.fromRGBO(197, 197, 197, 1),
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(12),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.only(right: .0),
            child: Container(
              height: 50,
              decoration: BoxDecoration(
                // borderRadius: border,
                border: Border(
                  left: BorderSide(width: 15.0, color: Colors.red),
                ),
              ),
              child: SizedBox(
                width: 300,
                child: Padding(
                  padding: const EdgeInsets.only(left: 8.0),
                  child: DropdownButtonFormField<String?>(
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      enabledBorder: InputBorder.none,
                    ),
                    items: [],
                    onChanged: (Object? value) {},
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

根據需要調整寬度

標籤：扑镖颤振布局颤振文本表单字段

上一篇：我怎樣才能全屏制作影像而不會丟失螢屏上的某些影像部分

下一篇：飛鏢中的遞回混合