【flutter经验问题快查】

最新推荐文章于 2024-05-04 16:49:15 发布

jeason_L

最新推荐文章于 2024-05-04 16:49:15 发布

阅读量276

点赞数

分类专栏： flutter 文章标签： flutter经验

本文链接：https://blog.youkuaiyun.com/jeason_L/article/details/102719049

版权

flutter 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Flutter开发中常用的技巧，包括防止键盘弹出时页面压缩、通过点击取消输入框焦点、利用WillPopScope处理返回键、实现复杂动画效果、自定义数据通讯方式以及获取Widget高度的方法，为开发者提供了一系列实用的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、键盘弹起不会压缩页面（页面不会跟键盘弹出相应布局）

Scaffold(
  resizeToAvoidBottomPadding: false,
  child: TextField()
 )

2、点击其他位置取消输入框焦点

Scaffold(
  // resizeToAvoidBottomPadding: false,
  body: GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () {
    // 触摸收起键盘
    FocusScope.of(context).requestFocus(FocusNode());
  },
  child: TextField()
))

3、返回键获取

WillPopScope(
  onWillPop: () {
    // 关闭上文
    close(context);
    // 返回一个false到then中
    return Future.value(false);
  },
  child: Container()
)

4、复杂多动画简单动画函数示例

class TestPage extends StatefulWidget{
   @override
   TestPageState createState() {
     return new TestPageState();
   }
}
class TestPageState extends State<TestPage>
  with TickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;
  Animation _curve;
  double _top = 0.0;
  void startAnimation(end) {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 400),
      debugLabel: 'preview banner',
      vsync: this,
    );
    _curve = CurvedAnimation(curve: Curves.easeOut, parent: _controller);
    _animation = Tween(
      begin: _top,
      end:end,
    ).animate(_curve)
    ..addListener((){
      setState((){
        //刷新重要
        _top = _animation.value;
      });
    })
    ..addStatusListener((AnimationStatus status) {
    });
    // 运动
    _controller.forward();
  }
  @override
  void initState() {
  	startAnimation();
  	super.initState();
  }
  @override
  Widget build(BuildContext context) {
  	return Scaffold(
       body: SizedBox.expand(
         child: Stack(
           children: [
           	 RaisedButton(child: Text('点我'),onPressed(){startAnimation(_top + 50.0);}),
           	 Position(
           	   right: 40.0,
           	   top: _top,
           	   Container(color: Colors(0xffaaaaaa),height:50.0,width:50.0)
           	 )
             
           ]
         )
       )
    );
  }
}

5、简单动画简单示例

class TestPage extends StatefulWidget{
   @override
   TestPageState createState() {
     return new TestPageState();
   }
}
class TestPageState extends State<TestPage>
  with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;
  Animation _curve;
  double _top = 50.0
  @override
  void initState() {
  	_controller = AnimationController(
      duration: const Duration(milliseconds: 400),
      debugLabel: 'preview banner',
      vsync: this,
    );
    _curve = CurvedAnimation(curve: Curves.easeOut, parent: _controller);
    startAnimation(50.0);
    super.initState();
    
  }
  void startAnimation(end) {
    _animation = Tween(
      begin: _top,
      end:end,
    ).animate(_curve)
    ..addListener((){
      //重要
       _top = _animation.value;
    })
    ..addStatusListener((AnimationStatus status) {
    });
    
    _controller.forward();
  }
//  ......
}

6、自己写数据通讯，应该怎么写？

/// 定义控制器
import 'package:flutter/foundation.dart';

class counterController<T> extends ValueNotifier<List<T>> {
  counterController(this.value) : super(value);
  counterController.fromValue(List<T> value) : super(value ?? List<T>());
  List<T> value;
  /// Set the controller to only contain this image
  setOne(index,T value) {
  	value[index] = value;
    notifyListeners();
  }
  addOne(T value) {
  	value.add(value);
    notifyListeners();
  }
}
/// 使用
/// statefulwidget下监听（记得取消监听）
initState() {
  controller?.addListener((){
    if (_effectiveController.value != value)
      didChange(_effectiveController.value);
  });
}

/// 渲染(直接使用controller)
controller.value

/// 触发
controller.addOne(123);

7、绑定成功后返回某个widget的高度

  /// 新建一个全局key
  final GlobalKey _boxKey = GlobalKey();
  @override
  void initState() {
    super.initState();
    /// 这里就是重点，挂载完毕后回调到getBoxHeight函数
    WidgetsBinding.instance.addPostFrameCallback(getBoxHeight);
  }
  Container(
  	key： _boxKey
  )