如何创建包含图像和显示数据的Flutter水平列表,更改所选项目的颜色,同时一次只允许选择一个项目?

wfveoks0  于 2023-08-07  发布在  Flutter
关注(0)|答案(1)|浏览(147)

我是Flutter的新手,一直在尝试创建一个带有图像的水平列表,在那里我可以显示一些数据。我尝试使用ListView.builder,但不幸的是,它似乎不像预期的那样工作。我也在Stack Overflow上寻找解决方案,但没有一个解决了我的问题。
我想实现的是一个像这样的图像的水平列表:Flutter Horizontal List Image。此外,我想更改选定项的颜色,以表明它当前处于选中状态。但是,我需要确保一次只能选择一个项目。因此,当我选择另一个项目时,应该取消选择先前选择的项目。
我将感谢任何关于如何有效实施这种行为的帮助或指导。提前感谢您的帮助!

0sgqnhkj

0sgqnhkj1#

使用水平listView时需要提供高度。关于Unbounded height / width | Decoding Flutter的精彩视频
你可以玩这个widget。

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上布局的更多信息

相关问题