Question

我正在尝试将instagram的相同概念从一种供稿转换为另一种供稿。在这里，我有一个quiz1部分，我想转到另一个quiz2部分，点击到右侧，然后按左侧，然后我去quiz1部分。

  Widget mainQuiz() {
return Column(
  children: [
    Spacer(
      flex: 1,
    ),
    Container(
      padding: EdgeInsets.all(30),
      child: Text(
        "When was the first spaceship NOT launched?",
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w600,
          fontSize: 24,
        ),
      ),
    ),
    /* ---------------------OPTION 1----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.all(10),
            child: Row(
              children: [
                Stack(
                  children: [
                    Container(
                      margin: EdgeInsets.only(right: 10),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(color: Colors.white),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.check,
                        size: 15,
                        color: Color(0xffFFC700),
                      ),
                    )
                  ],
                ),
                Text(
                  "Last Tuesday",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
          Spacer(),
          Container(
            constraints: BoxConstraints.expand(
              height: 40,
              width: 50,
            ),
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(100),
                bottomRight: Radius.circular(100),
              ),
            ),
            child: Center(
              child: Text(
                "55%",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
    /* ---------------------OPTION 2----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.all(10),
            child: Row(
              children: [
                Stack(
                  children: [
                    Container(
                      margin: EdgeInsets.only(right: 10),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(color: Colors.white),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.check,
                        size: 15,
                        color: Color(0xffFFC700),
                      ),
                    )
                  ],
                ),
                Text(
                  "1969",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
          Spacer(),
          Container(
            constraints: BoxConstraints.expand(
              height: 40,
              width: 50,
            ),
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(100),
                bottomRight: Radius.circular(100),
              ),
            ),
            child: Center(
              child: Text(
                "45%",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
    /* ---------------------OPTION 3----------------------*/
    Container(
      margin: EdgeInsets.only(
        left: 65,
        right: 65,
        bottom: 15,
      ),
      padding: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(100)),
      child: Row(
        children: [
          Stack(
            children: [
              Container(
                margin: EdgeInsets.only(right: 10),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white),
                  shape: BoxShape.circle,
                ),
                child: SizedBox(
                  height: 15,
                  width: 15,
                ),
              )
            ],
          ),
          Text(
            "1957",
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
          ),
        ],
      ),
    ),
    Spacer(
      flex: 2,
    ),
  ],
);
}

就像这是测验的一部分，我想转到第二个测验的部分，我可以采取相同的用户界面

Answer 1

我会将您的“ mainQuiz”包装在Stack小部件中。

这样，您可以在堆栈的子级中添加其他2个容器。

可以使用“定位”窗口小部件来定位这些容器。屏幕左侧是一个，右侧是一个。您也应该给它尺寸。

我会让它们透明，并给他们一个“ GestureDetector”或一些可以检测到点击的东西，然后调用导航器来更改屏幕。

Answer 2

根据您的要求，我认为您应该使用

PageView

默认情况下，它具有滑动功能可转到下一个和上一个屏幕。

编辑：- 根据您的要求，您知道您已经有了一个屏幕，该屏幕已经具有以给出答案的形式进行交互的功能，必须通过单击来完成。尽管您可以将空容器放在堆栈中以实现左右点击，但是由于容器需要有一定的宽度，因此它们会与您重叠，因为基本填充不超过20。因此，我认为您应该滑动或指定按钮可以左右移动，即下一个和上一个问题。

与instagram一样，如何从一种饲料到另一种饲料

2 个答案: