Flutter Horizo​​ntal scroll list - 如何将其设置为比父级更宽

Question

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

表单的宽度小于屏幕，因此列表视图也受到影响。我希望此列表视图溢出他的父项并与 phone 屏幕一样宽。

我该怎么做？我正在尝试使用 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

不可能让child大于parent，至少是违背设计模式的。当您这样做时，hitTest 将失败。换句话说，如果你的child（比如C）大于parent（比如P），并且你正在点击一个C显示但P没有显示的位置，那么C永远不会收到任何点击事件。这是因为 parent 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("");
                })),