带有导航图标颤动的水平列表

Question

我是新手，我尝试使用 listview.builder 进行此操作，但它不起作用。 我还查找了有关堆栈溢出先前问题的错误，但没有任何帮助。 我想制作一个水平列表作为图像并显示一些数据并更改所选项目的颜色。 但是一次只能选择一个项目，当我选择其他项目时，之前选择的项目应该被取消选择。 任何帮助，将不胜感激。

Answer 1

您需要在使用水平 listView 时提供高度。 关于无限高度/宽度的精彩视频 | 解码颤振

你可以玩这个小部件。

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int? _selectedIndex; // if you want to provide default selection, init here
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 30,
          ), //top level space
          SizedBox(
            height: 68, // play with height
            child: ListView.builder(
              itemCount: 33, //number of item you like show
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: InkWell(
                    borderRadius: BorderRadius.circular(12),
                    onTap: () {
                      setState(() {
                        _selectedIndex = index;
                      });
                    },
                    child: Container(
                      alignment: Alignment.center,
                      width: 48,
                      height: 48,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color:
                            _selectedIndex == index ? Colors.blue : Colors.grey,
                      ),
                      child: Text("$index"),
                    ),
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

在flutter.dev上查看有关布局的更多信息