LoadingView 包裹 Scaffold, 获取不到底部导航栏?
时间: 2024-01-22 21:20:51 浏览: 35
如果你的 `LoadingView` 是包裹在 `Scaffold` 中的,那么可以尝试使用 `Builder` 组件来获取 `Scaffold` 的上下文,再从中获取底部导航栏的高度。
示例代码:
```dart
class LoadingView extends StatelessWidget {
final Widget child;
const LoadingView({Key key, this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Builder(
builder: (BuildContext context) {
// 获取 Scaffold 的上下文
final scaffoldContext = context;
// 显示加载中状态
return Center(
child: CircularProgressIndicator(),
);
},
),
bottomNavigationBar: BottomNavigationBar(
// 底部导航栏代码
),
);
}
}
```
在获取到 `scaffoldContext` 后,就可以通过 `MediaQuery` 来获取底部导航栏的高度了。示例代码:
```dart
// 获取底部导航栏高度
final bottomNavBarHeight = MediaQuery.of(scaffoldContext).padding.bottom;
```
在进行页面布局时,需要将 `bottomNavBarHeight` 的高度减去,以避免遮挡到底部导航栏。例如:
```dart
// 布局代码
child: Container(
height: MediaQuery.of(scaffoldContext).size.height - bottomNavBarHeight,
child: child,
),
```
希望能对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)