当前位置：首页 > news >正文

Flutter桌面开发（三、widget布局与表单）

news 来源：原创 2025/5/19 5:01:55

一、流式布局
横铺或者竖着铺
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;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.phoneNumber);
    _controller_email = TextEditingController(text: widget.emailAddress);
  }

  @override
  void dispose() {
    _controller.dispose();
    _controller_email.dispose();
    super.dispose();
  }

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

四、自适应布局 Expanded