flutter - ListView.builder 项目未在滚动方向水平的容器内居中对齐

Question

这是我的小部件：

// the category selector widget

class CategorySelector extends StatefulWidget {
  const CategorySelector({Key? key}) : super(key: key);

  @override
  _CategorySelectorState createState() => _CategorySelectorState();
}

class _CategorySelectorState extends State<CategorySelector> {
  // categories
  List<String> categories = ['Messages', 'Online', 'Groups', 'Requests'];

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 80,
      alignment: Alignment.centerLeft, // FIXME: doesn't work
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: categories.length,
          itemBuilder: (context, index) {
            return Text(categories[index]);
          },
        ),
      ),
    );
  }
}

电流输出

问题是 ListView.builder 项目没有在滚动方向水平的容器内的中心对齐。我想在左中对齐 ListView 项目。我可以知道我该怎么做吗？

标签： flutterdart

Answer 1

据我所知，ListView 总是获得她父级高度/宽度的完整大小取决于滚动方向。那就是我们需要定义列表视图的高度/宽度。对于你的，scrollDirection 是水平的，所以解决方案是

      Container(
        color: Colors.blue,
        height: 80,
        alignment: Alignment.center, // FIXME: does it work for you?
        child: Container(
          height: 14,
          child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: categories.length,
            itemBuilder: (context, index) {
              return Text(categories[index], style: TextStyle(fontSize: 14),);
            },
          ),
        ),
      )