Flutter onTap forinkwell

Question

我目前正在一个页面上工作，该页面中有一堆容器，点击它们时，它们应该能够将颜色从“ bluegrey”更改为“ grey”。

我现在的输出是：

我想要的输出是：

我的代码是：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: Hexcolor('#e9f1fe'),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.only(top: 40.0, right: 16.0, left: 16.0),
            child: Container(
              height: 60,
              color: Colors.blueGrey,
              child: Center(
                child: Text(
                  'Random Text 1',
                  style: TextStyle(
                      fontSize: 26.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 40.0, right: 16.0, left: 16.0),
            child: Container(
              height: 60,
              color: Colors.blueGrey,
              child: Center(
                child: Text(
                  'Random Text 2',
                  style: TextStyle(
                      fontSize: 26.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 40.0, right: 16.0, left: 16.0),
            child: Container(
              height: 60,
              color: Colors.blueGrey,
              child: Center(
                child: Text(
                  'Random Text 3',
                  style: TextStyle(
                      fontSize: 26.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    ));
  }
}

`

我可以为此获得一些帮助吗？代码段将非常有帮助。谢谢！

Answer 1

据我了解您的问题，我想回答。
你可以做类似的事情。

Map<String, Color> buttonColors = { };

制作这样的InkWell小部件，

 InkWell(
    onTap: () => {
      setState(() {
        buttonColors ['button1'] = Colors.blueGrey;
      })
    },
    child: Padding(
      padding: EdgeInsets.only(top: 40.0, right: 16.0, left: 16.0),
      child: Container(
        height: 60,
        color: buttonColors ['button1'] ?? Colors.grey,
        child: Center(
          child: Text(
            'Random Text 1',
            style: TextStyle(
                fontSize: 26.0,
                fontWeight: FontWeight.bold,
                color: Colors.white),
          ),
        ),
      ),
    ),
  )

如果他们单击您的按钮，请在'button1'映射中设置buttonColors的状态。 呈现按钮时，它将检查null的值是否为button1，如果是，则将应用Colors.grey，否则，如果您单击并设置状态，然后它具有一些颜色值，并显示该颜色。在这里Colors.blueGrey。