当前位置: 首页 > article >正文

Flutter桌面开发(三、widget布局与表单)

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

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

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

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

四、 自适应布局 Expanded


http://www.kler.cn/a/588773.html

相关文章:

  • Python手写机器学习的“线性回归”算法
  • 深度学习CNN特征提取与匹配
  • 【AWS入门】AWS云计算简介
  • 机器学习 [白板推导](三)[线性分类]
  • 【C++】一文吃透STL容器——list
  • deepseek GRPO算法保姆级讲解(数学原理+源码解析+案例实战)
  • 详解Flutter单线程模型,以及Flutter是如何通过单线程实现异步的
  • 云原生周刊:Istio 1.25.0 正式发布
  • [Linux][经验总结]Ubuntu6.11.0 docker更换镜像源(实操可用的正确方法)
  • 摄像头模块ISP处理流程
  • go程序调用k8s pod副本的名称IP手动赋值给configmap的参数
  • 【网络原理】关于HTTP的进化之HTTPS的加密原理的那些事
  • 【sklearn 01】人工智能概述
  • java常量池
  • Java-servlet(六)详细讲解Servlet-Web.xml标签知识
  • 【第14届蓝桥杯】软件赛CB组省赛
  • 机器视觉最佳光源方案 = 目标特征最大化 + 干扰最小化 + 环境适应性 + 成本可控,机器视觉检测项目中工业光源方案设计原则
  • Wireshark 对 https 请求抓包并展示为明文
  • 第二十二篇 SQL优化之等价改写:从青铜到王者
  • linux 命令 grep