Flutter：在 Column 中包装 Layoutbuilder 和 Text 时出错

Posted 2023-03-17

【中文标题】Flutter：在 Column 中包装 Layoutbuilder 和 Text 时出错

【英文标题】：Flutter: Errors when wrapping Layoutbuilder and Text in Column

【发布时间】：2021-08-21 13:53:42

【问题描述】：

我目前有一个侧面带有字母滚动条的列表视图。我正在尝试在顶部添加一个搜索框，但是每当我将某些内容包装在列中时，都会出现错误。 使用当前代码，Stack里面的ListView正在抛出Vertical viewport was given unbounded height.

当我删除列和 Text('TestString') 时，我的代码工作正常。我尝试在 ListView.Builder 周围添加一个 Expandable ，但这似乎也没有解决它。

  @override
  Widget build(BuildContext context) 
    height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title,
            style: TextStyle(
                fontSize: 20.0,
                color: Colors.white,
                fontWeight: FontWeight.bold)),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Text('TestString'),
          new LayoutBuilder(
            builder: (context, constraints) 
              return new Stack(children: [
                //Causes the current issue
                ListView.builder(
                  itemCount: exampleList.length,
                  controller: _controller,
                  itemExtent: _itemsizeheight,
                  itemBuilder: (context, position) 
                    return Padding(
                        padding: const EdgeInsets.only(right: 32.0),
                        child: Card(
                          child: Padding(
                            padding: const EdgeInsets.all(16.0),
                            child: Text(
                              exampleList[position],
                              style: TextStyle(fontSize: 20.0),
                            ),
                          ),
                        ));
                  ,
                ),
                Positioned(
                    right: _marginRight,
                    top: _offsetContainer,
                    child: _getSpeechBubble()),
                Align(
                  alignment: Alignment.centerRight,
                  child: GestureDetector(
                    onTapDown: (details) 
                      _onTapDown(details);
                    ,
                    child: GestureDetector(
                      onVerticalDragUpdate: _onVerticalDragUpdate,
                      onVerticalDragStart: _onVerticalDragStart,
                      onVerticalDragEnd: (details) 
                        setState(() 
                          isPressed = false;
                        );
                      ,
                      child: Container(
                        //height: 20.0 * 26,
                        color: Colors.transparent,
                        child: new Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: []..addAll(
                              new List.generate(_alphabet.length,
                                  (index) => _getAlphabetItem(index)),
                            ),
                        ),
                      ),
                    ),
                  ),
                ),
              ]);
            ,
          ),
        ],
      ),
    );
  

  _getSpeechBubble() 
    return isPressed
        ? new SpeechBubble(
            nipLocation: NipLocation.RIGHT,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  width: 30,
                  child: Center(
                    child: Text(
                      "$_text ?? "$_alphabet.first"",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )
        : SizedBox.shrink();
  

  ValueGetter? callback(int value) 

  _getAlphabetItem(int index) 
    return new Expanded(
      child: new Container(
        width: 40,
        height: 20,
        alignment: Alignment.center,
        child: new Text(
          _alphabet[index],
          style: (index == posSelected)
              ? new TextStyle(fontSize: 16, fontWeight: FontWeight.w700)
              : new TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
        ),
      ),
    );
  

【参考方案1】：

您可以像这样用Expanded() 包裹您的LayoutBuilder()，它不会显示错误。

return Container(
  child: Column(
    children: [
      Text("Header"),
      Expanded(
        child: ListView.builder(
          itemCount:50,
          itemBuilder: (BuildContext context, int index) 
            return Text("List Item $index");
          ,
        ),
      ),
      Text("Footer"),
    ],
  ),
);

你可以试试代码here