Question

我使用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
                      ),),
                  ),
                ),
              ],
            );
          }),
      ),
    );

Answer 1

您不需要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),
      ),
    ),
  );
}

Answer 2

在行中添加crossAxisAlignment，它将从顶部开始用户界面

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

水平行视图：RenderFlex在右侧溢出了66个像素

2 个答案: