bottomNavigationBar 的区域在屏幕上占了一半。我如何解决它？答案

【问题标题】：bottomNavigationBar's area filled half on screen. How do I fix it?bottomNavigationBar 的区域在屏幕上占了一半。我如何解决它？
【发布时间】：2022-11-03 17:40:53
【问题描述】：

感谢您检查:)

我不知道为什么底部导航栏的区域在屏幕上占了一半。底部导航栏的区域填充为黑色。我希望底部导航栏仅显示导航底部区域。

如果我删除 Expanded，renderflex 错误将显示给我..

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int visit = 0;
  double height = 30;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      bottomNavigationBar: BottomBarFloating(
          iconSize: 25,
        items: items,
        backgroundColor: Colors.white,
        color: Colors.black,
        colorSelected: PRIMARY_COLOR,
        indexSelected: visit,
        paddingVertical: 30,
        onTap: (int index) => setState(() {
        visit = index;
        }),
        ),
    );
  }
}

class SearchOffScreen extends StatelessWidget {
  const SearchOffScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        top: true,
        bottom: false,
        child: Column(
            children: [
              const SizedBox(height: 250.0,),
              _SearchBox(),
              Expanded(child: MyHomePage(title: '')),
            ],
        ),
      ),
    );
  }
}

class DefaultLayout extends StatelessWidget {
  final Widget child;
  final String? title;

  const DefaultLayout({
    required this.child,
    this.title,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: child,
    );
  }

如果我删除 Expanded，renderflex 错误会显示给我..

我该如何解决？

【问题讨论】：

您是否在同一页面中使用 2 个脚手架
谢谢，我应该改变哪个脚手架其他小部件？
脚手架应该在顶部，您能否为您正在使用的每个小部件共享一个最少的代码，以便我们提供帮助？
我在脚本中更新了我的代码 :) 你能检查一下吗？

标签： flutter flutter-layout flutter-animation

【解决方案1】：

试试这个，在页面中只使用一个脚手架

class MyHomePage extends StatefulWidget {


const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int visit = 0;
  double height = 30;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: //your code here
    );
  }
}

class SearchOffScreen extends StatelessWidget {
  const SearchOffScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        top: true,
        bottom: false,
        child: Column(
            children: [
              const SizedBox(height: 250.0,),
              _SearchBox(),
              Expanded(child: MyHomePage(title: '')),
            ],
        ),
      ),
    );
  }
}

class DefaultLayout extends StatelessWidget {
  final Widget child;
  final String? title;

  const DefaultLayout({
    required this.child,
    this.title,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: child,
      bottomNavigationBar: BottomBarFloating(
          iconSize: 25,
        items: items,
        backgroundColor: Colors.white,
        color: Colors.black,
        colorSelected: PRIMARY_COLOR,
        indexSelected: visit,
        paddingVertical: 30,
        onTap: (int index) => setState(() {
        visit = index;
        }),
      ),
    );
  }

【讨论】：