Question

我对Flutter并不陌生，并且正在构建一个应用程序，该应用程序将允许用户选择美国的州来发起搜索。一切都在进行，直到我需要实现BottomNavigationBar为止。我在初始启动类中设置了导航栏。当我尝试通过点击“搜索”菜单项加载状态ListView时，出现渲染错误，并且ListView无法在屏幕上渲染。我的应用程序显示如下：

以下是显示我的BottomNavigationBar实现的代码：

class _MyHomePageState extends State<MyHomePage> {

  int _currentIndex = 0;

  final List<Widget> views = [
    Text('Home'),
    Text('Favorites'),
    StateGaugesView(),
  ];

  void onNavbarItemTapped(int index){
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App Title") // Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[views[_currentIndex]],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onNavbarItemTapped,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text('Home')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.star), title: Text('Favorites')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text('Search')
          )
        ],
      ),// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

这是StateGaugesView类中的代码：

class StateGaugesView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _StateGaugesViewState();
}

class _StateGaugesViewState extends State<StateGaugesView> {
  final states = kAllStates;

  @override
  Widget build(BuildContext context) {
    final stateKeys = states.keys;
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount: stateKeys.length,
          itemBuilder: (BuildContext context, int index){
            var state = states[index];
            return Card(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Text("${states[index]}", style: TextStyle(fontWeight: FontWeight.normal, fontSize: 17),)
                ],
              ),
            );
          }
        ),
      )
    );
  }
}

当我运行此应用并点击“搜索”菜单项时，出现以下错误：

_StateGaugesViewState

_RenderInkFeatures object was given an infinite size during layout.
RenderPhysicalModel object was given an infinite size during layout.

_MyHomePageState

A RenderFlex overflowed by Infinity pixels on the bottom.

我遵循了一个在线代码示例进行设置，除了数据差异之外，我看不到任何其他代码与他们的代码不同的地方。谁能帮助我了解为什么会这样？谢谢！

Answer 1

您需要使用SingleChildScrollView，然后将Column放入其中，也可以尝试替换Container并直接传递Listview.builder集physics: NeverScrollableScrollPhysics()

从菜单栏项加载ListView时出现渲染问题

1 个答案: