Flutter 水平滚动列表 - 如何设置它比父级更宽

Question

我有一个表单，里面有几个文本字段和一个水平滚动视图，我可以在其中上传一些图像。

表单的宽度比屏幕小，因此列表视图也会受到影响。我希望这个列表视图溢出他的父母，并且和手机屏幕一样宽。

我该怎么做？我正在尝试使用 OverflowBox，但出现错误。这是我的工作代码：

class HorizontalScrollWidget extends StatelessWidget {

 @override
 Widget build(BuildContext context) {
   return
     Container(
       child: Column(
         children: [
           Container(
             child: AutoSizeText(
               ".....",
               maxLines: 1,
               style: ....,
             ),
           ),
           _buildFeaturedCards(5),
         ],
       ),
     );
 }
}

Widget _buildFeaturedCards(int maxLength) {
 final cards = <Widget>[];
 Widget ScrollableCardsRow;

 if (maxLength > 0) {
   for (int i = 0; i < maxLength; i++) {
     cards.add( SquarePhotoElement() );
   }
   ScrollableCardsRow = Container(
     // TODO: OverflowBox??
     child: Column(
       children: <Widget>[
         SingleChildScrollView(
           scrollDirection: Axis.horizontal,
           child: Row(children: cards),
         ),
       ],
     ),
   );
 } else {
   ScrollableCardsRow = Container();
 }
 return ScrollableCardsRow;
}

感谢您的帮助

Answer 1

不可能让孩子比父母大，或者至少违背设计模式。当你这样做时，hitTest 将失败。换句话说，如果您的孩子（比如 C）比父母（比如 P）大，并且您正在点击 C 显示但 P 没有显示的位置，那么 C 将永远不会收到任何点击事件。这是因为家长 P 认为“哦，那个水龙头不在我的区域，所以我忽略它”。然后 P 永远不会接受该点击，因此 C 永远不会看到该事件。因此，重构您的小部件树以避免这种情况。

另一种方法是使用Overlay（或使用Portal库，它是 Overlay 的包装器）。叠加层不受此限制。

Answer 2

像这样使用你的容器的属性width 到width: double.infinity

class HorizontalScrollWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          Container(
            child: AutoSizeText(
              ".....",
              maxLines: 1,
              style: ....,
            ),
          ),
          _buildFeaturedCards(5),
        ],
      ),
    );
  }


  Widget _buildFeaturedCards(int maxLength) {
    final cards = <Widget>[];
    Widget ScrollableCardsRow;

    if (maxLength > 0) {
      for (int i = 0; i < maxLength; i++) {
        cards.add( SquarePhotoElement() );
      }
      ScrollableCardsRow = Container(
        // TODO: OverflowBox??
        width: double.infinity,
        child: Column(
          children: <Widget>[
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(children: cards),
            ),
          ],
        ),
      );
    } else {
      ScrollableCardsRow = Container();
    }
    return ScrollableCardsRow;
  }
}

Answer 3

我希望上述解决方案对您有用，但如果不行，您也可以尝试以下代码。在这里，您只需将列表传递给包裹在 Flexible 中的网格视图构建器。

       Flexible(
            child: GridView.builder(
                itemCount: listProducts.length ,
                scrollDirection: Axis.horizontal,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 1,
                  mainAxisSpacing: 0,
                  childAspectRatio: 2,
                ),
                itemBuilder: (BuildContext context, int index) {
                  return Text("");
                })),