flutter FractionallySizedBox / 百分比布局、根据父容器百分比布局 / 点击空白隐藏键盘

用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父控件的比例。注意设置FractionallySizedBox宽高后,其子组件设置的宽高将不起作用

FractionallySizedBox(
        widthFactor: 0.5,  // 百分比 - 整个区域最大的宽度
        heightFactor: 0.5, // 百分比 - 整个区域最大的高度
        child: SizedBox.fromSize(
          size: Size(300.0, 370.0), // 不起作用, 被 widthFactor 和 heightFactor 限制了.
          child: RaisedButton(
            color: Colors.pink,
              child: Text('pressed',style: TextStyle(color: Colors.white),),
              onPressed: () {
                print('onPressed');
              }),
        ),
      )

点击空白关闭、隐藏键盘

// 点击空白  关闭键盘 时传的一个对象
  FocusNode blankNode = FocusNode();
把内容放在这个里面,加入FocusManager.instance.primaryFocus?.unfocus(), 就可以了
GestureDetector(
         // 全局添加点击空白处隐藏键盘
        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
        child:Container()
)

也可以这样放这里InkWell

InkWell(
        onTap: ()=>closeKeyboard(context), //点击空白关闭键盘
        child: )
定义一个方法closeKeyboard
void closeKeyboard(BuildContext context) {
    FocusScope.of(context).requestFocus(blankNode);
   
  }
  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Flutter中,可以通过使用`WidgetsBinding`来监听软键盘的弹起和收起事件,同时使用`SingleChildScrollView`来为布局进行滚动以适应软键盘的高度。 要实现软键盘弹起布局,可以按照以下步骤进行: 1. 导入必要的包: ```dart import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; ``` 2. 创建一个`StatefulWidget`,该组件将包含你的布局: ```dart class MyLayout extends StatefulWidget { @override _MyLayoutState createState() => _MyLayoutState(); } class _MyLayoutState extends State<MyLayout> { // 声明一个控制器来获取文本输入框的焦点 final FocusNode _focusNode = FocusNode(); // 监听软键盘状态 @override void initState() { super.initState(); // 在布局构建完成后开始监听软键盘事件 SchedulerBinding.instance.addPostFrameCallback((_) { _focusNode.addListener(() { if (_focusNode.hasFocus) { // 获取焦点时,键盘弹起 _scrollToBottom(); } }); }); } // 滚动到底部 void _scrollToBottom() { SchedulerBinding.instance.addPostFrameCallback((_) { Scrollable.ensureVisible( _focusNode.currentContext!, duration: const Duration(milliseconds: 300), ); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter键盘弹起布局'), ), body: SingleChildScrollView( child: Column( children: <Widget>[ // your content here TextFormField( focusNode: _focusNode, // 将焦点设置给文本输入框 decoration: InputDecoration( labelText: '文本输入框', ), ), // more widgets... ], ), ), ); } } ``` 3. 在Flutter应用的入口处使用该布局: ```dart void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyLayout(), ); } } ``` 通过以上步骤,可以实现一个监听软键盘弹起的布局。当文本输入框获得焦点时,布局可以自动滚动到底部以适应软键盘的高度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初遇你时动了情

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值