新乡专业的网站建设公司网站模板 php

一、流式布局
横铺或者竖着铺
Row 或者 Column
这俩都是有Children的就是可以有多个子元素

例子：

Row(Children:[Container(),Container(),Container(),]
）

Container 类似于 html中的DIV 可以设置背景 border 和 宽度高度

Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage('assets/images/login_bg.webp'),fit: BoxFit.cover,),),
),

另外，如果需要在一个元素上添加手表手势和点击事件，就需要使用其他支持的widget嵌套

 MouseRegion(cursor: SystemMouseCursors.basic, // 鼠标手势child: GestureDetector( // 绑定点击事件onTap: isLoginButtonEnabled ? handleLogin : null,child: Container(

元素和元素之间的间距 可以使用Container设置Padding Margin 或者 使用设置宽或者高的SizeBox

padding: const EdgeInsets.only(top: 10, bottom: 10),EdgeInsets.all 所有SizedBox(width: 16),

居中定位使用Center 这个widget. 配合 中轴线使用

Center(child: Image.asset('assets/images/login_logo.webp',width: 123,height: 40,fit: BoxFit.cover,),
)水平和垂直居中
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,

二、层叠布局
需要使用 Stack和Positioned
类似于 html中的position absolute但是 还是有差别的
一定要注意 Stack 是 Z轴 包住的部分在下面 Postioned 弹出在Stack上

三、表单
表单主要是输入框

TextField(controller: _controller,cursorHeight: 14,textAlignVertical: TextAlignVertical.center,style: TextStyle(fontSize: 14,height: 1.5,),decoration: InputDecoration(border: InputBorder.none,hintText: '请输入手机号',contentPadding: const EdgeInsets.only(top: 15, bottom: 15, left: 2),hintStyle: TextStyle(fontSize: 14,color: Color.fromRGBO(191, 191, 191, 1),),),keyboardType: TextInputType.number,inputFormatters: [FilteringTextInputFormatter.digitsOnly,LengthLimitingTextInputFormatter(11)],onChanged: (text) {print('phone number field: $text (${text.characters.length})');widget.updatePhoneNumber(text);},),

需要数据同步就要用到 TextEditingController

 late TextEditingController _controller;late TextEditingController _controller_email;@overridevoid initState() {super.initState();_controller = TextEditingController(text: widget.phoneNumber);_controller_email = TextEditingController(text: widget.emailAddress);}@overridevoid dispose() {_controller.dispose();_controller_email.dispose();super.dispose();}

其中 keyboardType: TextInputType.number, 限制只能输入数字
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(11)
],
限制最长11位

四、 自适应布局 Expanded