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

【问题标题】：Rendering problem when loading a ListView from a menubar item从菜单栏项加载 ListView 时出现渲染问题
【发布时间】：2020-07-04 17:13:10
【问题描述】：

我是 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.

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

【问题讨论】：

标签： android ios flutter flutter-layout

【解决方案1】：

你需要使用SingleChildScrollView然后把Column放在里面，你也可以尝试替换Container直接通过Listview.builder设置physics: NeverScrollableScrollPhysics()

【讨论】：