如何在FLUTTER中的onTap事件中更改Container的颜色和文本 [英] How do i change the color and text of Container at onTap event in FLUTTER

问题描述

我连续有两个容器，我要做的是，当我单击第一个容器时，它会更改其颜色以及第二个容器

I have two containers in a row and what i want to do is when i click the 1st container it changes its color as well as the 2nd container

即-当我单击第一个容器时，它看起来像已选中，另一个已取消选择，与第二个容器相同.

反正有这样做吗?

GestureDetector(
                    onTap: () {
                      print('its getting pressed');

                    },
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Expanded(
                          child: Container(
                            height: screenHeight * 0.057,
                            width: double.infinity,
                            color: greyf1,
                            child: Center(
                              child: Text(
                                'Borrower',
                                style: hintTextTextStyle,
                              ),
                            ),
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Expanded(
                          child: Container(
                            height: screenHeight * 0.057,
                            width: double.infinity,
                            color: greyf1,
                            child: Padding(
                              padding: const EdgeInsets.only(left: 15),
                              child: Center(
                                child: Text(
                                  'Lender',
                                  style: hintTextTextStyle,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),

推荐答案

您可以尝试以下方法.这将使用 selected 属性来确定哪个容器应为蓝色.

You can try the following. This will use the selected property to decide which container should be blue.

尚未测试代码

class _TestState extends State<Test> {
  String selected = "first";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        GestureDetector(
          onTap: () {
            setState(() {
              selected = 'first';
            });
          },
          child: Container(
            height: 200,
            width: 200,
            color: selected == 'first' ? Colors.blue : Colors.transparent,
            child: Text("First"),
          ),
        ),
        GestureDetector(
          onTap: () {
            setState(() {
              selected = 'second';
            });
          },
          child: Container(
            height: 200,
            width: 200,
            color: selected == 'second' ? Colors.blue : Colors.transparent,
            child: Text("Second"),
          ),
        ),
      ],
    );
  }
}

这篇关于如何在FLUTTER中的onTap事件中更改Container的颜色和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！