gaowei1012 / blog

this is blog
2 stars 0 forks source link

输入框表单 #50

Open gaowei1012 opened 3 years ago

gaowei1012 commented 3 years ago

基本用法

children: [
          Container(
              width: MediaQuery.of(context).size.width,

              /// 下划线
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: Colors.blue[200], width: .6))),
              child: TextField(
                keyboardType: TextInputType.name,
                decoration: InputDecoration(
                    // labelText: "用户名",
                    hintText: "请输入用户名",
                    prefixIcon: Icon(Icons.person),
                    border: InputBorder.none),
              )),
          Container(
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(color: Colors.blue[200], width: .6))),
            child: TextField(
              keyboardType: TextInputType.text,
              obscureText: true,
              decoration: InputDecoration(
                  hintText: '请输入密码',
                  border: InputBorder.none,
                  prefixIcon: Icon(Icons.lock)),
            ),
          )
        ],
gaowei1012 commented 3 years ago

TextField 属性


    TextField({
          this.controller,
    this.focusNode,
    this.decoration = const InputDecoration(),
    TextInputType keyboardType,
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.strutStyle,
    this.textAlign = TextAlign.start,
    this.textAlignVertical,
    this.textDirection,
    this.readOnly = false,
    ToolbarOptions toolbarOptions,
    this.showCursor,
    this.autofocus = false,
    this.obscuringCharacter = '•',
    this.obscureText = false,
    this.autocorrect = true,
    SmartDashesType smartDashesType,
    SmartQuotesType smartQuotesType,
    this.enableSuggestions = true,
    this.maxLines = 1,
    this.minLines,
    this.expands = false,
    this.maxLength,
    this.maxLengthEnforced = true,
    this.onChanged,
    this.onEditingComplete,
    this.onSubmitted,
    this.onAppPrivateCommand,
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorHeight,
    this.cursorRadius,
    this.cursorColor,
    this.selectionHeightStyle = ui.BoxHeightStyle.tight,
    this.selectionWidthStyle = ui.BoxWidthStyle.tight,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection = true,
    this.onTap,
    this.mouseCursor,
    this.buildCounter,
    this.scrollController,
    this.scrollPhysics,
    this.autofillHints,
    this.restorationId,
    })
gaowei1012 commented 3 years ago

初步实现登录

body: Padding(
          padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
          child: Form(
            key: _formKey,
            autovalidate: true,
            child: Column(
              children: [
                TextFormField(
                  autofocus: true,
                  controller: _unameController,
                  decoration: InputDecoration(
                      hintText: '用户名', icon: Icon(Icons.person)),
                  validator: (v) {
                    /// 校验用户名
                    return v.trim().length > 0 ? null : '用户名不能空';
                  },
                ),
                TextFormField(
                  autofocus: true,
                  controller: _pwdContaroller,
                  decoration:
                      InputDecoration(hintText: '密码', icon: Icon(Icons.lock)),
                  validator: (p) {
                    return p.trim().length > 0 ? null : '密码不能为空';
                  },
                ),
                Padding(
                  padding: EdgeInsets.only(top: 38),
                  child: Row(
                    children: [
                      Expanded(
                        child: RaisedButton(
                          color: Colors.blue,
                          padding: EdgeInsets.all(16),
                          onPressed: _submit,
                          child: Text(
                            '登录',
                            style:
                                TextStyle(fontSize: 16.0, color: Colors.white),
                          ),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ));

Future _submit() {
    if ((_formKey.currentState as FormState).validate()) {
      /// 通过验证,提交
    }
  }