水平行视图：右侧溢出 66 像素的 RenderFlex答案

【问题标题】：Horizontal Row View : A RenderFlex overflowed by 66 pixels on the right水平行视图：右侧溢出 66 像素的 RenderFlex
【发布时间】：2020-09-18 03:08:25
【问题描述】：

我将 ListView 用于显示水平滚动的选项卡，但问题是它们显示在屏幕中间，我希望它显示在屏幕顶部。

有没有办法解决这个问题并在屏幕顶部显示这个列表？

我是这样做的：

      body: Container(
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
            itemCount: 1,
            itemBuilder: (BuildContext context, int index){
            return  Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(left:20.0, right:20,top: 10, ),
                  child: InkWell(
                    child: Text(
                      'All',
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.grey
                      ),),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left:20.0, right:20,top: 10, ),
                  child: InkWell(
                    child: Text(
                      'Cars',
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.grey
                      ),),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left:20.0, right:20,top: 10, ),
                  child: InkWell(
                    child: Text(
                      'Buildings',
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.grey
                      ),),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left:20.0, right:20,top: 10, ),
                  child: InkWell(
                    child: Text(
                      'Assorted Devices',
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.grey
                      ),),
                  ),
                ),
              ],
            );
          }),
      ),
    );

【问题讨论】：

从您的ListView 中删除Row，并使其子代直接指向children 的ListView
我做了但现在什么都没有显示.. 或者我应该在返回后输入什么？

标签： listview flutter dart

【解决方案1】：

在 Row 中添加 crossAxisAlignment，它将从顶部启动您的 UI

         Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            //...
             )

【讨论】：

【解决方案2】：

您不需要Container、ListView.builder 和Row，只需使用：

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    _buildInkWell('All'),
    _buildInkWell('Cars'),
    _buildInkWell('Building'),
    _buildInkWell('Assorted Devices'),
  ],
)

Widget _buildInkWell(String text) {
  return Padding(
    padding: const EdgeInsets.only(
      left: 20.0,
      right: 20,
      top: 10,
    ),
    child: InkWell(
      child: Text(
        text,
        style: TextStyle(fontSize: 20, color: Colors.grey),
      ),
    ),
  );
}

【讨论】：