前端 - flutter页面布局问题？

Question

页面布局代码如下，第一次打开页面Column里三个组件是紧挨着的，零点几秒后才MainAxisAlignment.spaceBetween分开，时间虽然不是很久但是肉眼还是可见的有点延迟，请问是因为什么原因？

    Scaffold(          body: WillPopScope(            onWillPop: () async {              return false;            },            child:         Container(            margin: EdgeInsets.fromLTRB(0, 124, 0, 64),            child:Column(              mainAxisAlignment: MainAxisAlignment.spaceBetween,              children: [                Container(                child:Text('111')),                Container(//几百px的图片                  child: Image.asset('images/xxx.png'),                ),                Container(                child:Text('222')),              ],            )        )    )

Answer 1

在 Flutter 中，页面布局的渲染是异步的，因此你在第一次打开页面时，可能会出现布局初始状态是紧挨着的，然后经过零点几秒后才按照 MainAxisAlignment.spaceBetween 分开的情况。这是因为 Flutter 在初始化时会进行布局计算和渲染，但这些过程并不是立即完成的，可能会需要一些时间。所以，你看到的延迟是因为布局的计算和渲染过程。

为了解决这个问题，你可以尝试使用 WidgetsBinding 组件的 addPostFrameCallback 方法，该方法在 widget 首次渲染完成后会执行传入的回调函数。这样你可以在回调函数中触发重新绘制页面，确保布局在页面加载完成后立即按照 MainAxisAlignment.spaceBetween 进行分开。

示例代码如下：

dart
Copy code
import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
bool _isLayoutReady = false;

@override
Widget build(BuildContext context) {

return Scaffold(  body: WillPopScope(    onWillPop: () async {      return false;    },    child: Container(      margin: EdgeInsets.fromLTRB(0, 124, 0, 64),      child: Column(        mainAxisAlignment: MainAxisAlignment.spaceBetween,        children: [          Container(            child: Text('111'),          ),          Container(            // 几百px的图片            child: Image.asset('images/xxx.png'),          ),          Container(            child: Text('222'),          ),        ],      ),    ),  ),);

}

@override
void initState() {

super.initState();WidgetsBinding.instance.addPostFrameCallback((_) {  setState(() {    _isLayoutReady = true;  });});

}
}
在这个示例中，我们使用了一个布尔变量 _isLayoutReady 来标记页面是否已经渲染完成。在 initState 方法中，我们使用 WidgetsBinding 组件的 addPostFrameCallback 方法来添加一个回调函数，该回调函数会在 widget 首次渲染完成后执行。在回调函数中，我们调用了 setState 方法来触发重新绘制页面，确保布局按照 MainAxisAlignment.spaceBetween 分开。

这样做的话，即使页面初始化时出现布局紧挨着的情况，页面加载完成后会立即进行重新布局，避免了延迟问题。