Как добавить функцию прокрутки в Scaffold

Question

У меня возникает проблема, когда я добавляю функцию прокрутки в Scaffold, здесь я попробовал SingleChildScrollView, CustomerScrollView и ListView, но он замораживает пользовательский интерфейс, но когда я заменил Scaffold на LayoutBuilder, он работает, но весь фон моего пользовательского интерфейса стал черным , Я просто хочу функционально добавить прокрутку в Scaffold.

Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () {
           ...Some Code...
        },
        child: Scaffold(
          body: Column(
            children: <Widget>[
              Expanded(
                  flex: 3,
                  child: Container(
                    padding: EdgeInsets.all(15.0),
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      mydata[0][i.toString()],
                      style: TextStyle(fontSize: 16.0, fontFamily: "Quando"),
                    ),
                  )),
              Expanded(
                  flex: 6,
                  child: Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        choiceButton('a'),
                        choiceButton('b'),
                        choiceButton('c'),
                        choiceButton('d'),
                      ],
                    ),
                  )),
              Expanded(
                  flex: 1,
                  child: Container(
                    alignment: Alignment.topCenter,
                    child: Text(showtimer,
                        style: TextStyle(
                            fontSize: 35.0,
                            fontFamily: "Times New Roman",
                            fontWeight: FontWeight.w700)),
                  ))
            ],
          ),
        ) // Scaffold
      );// WillPopScope
  }

Answer 1

Не используйте Expanded внутри какого-либо прокручиваемого контейнера, если вы не завернули его в фиксированную границу на его главной оси.

Как и в вашем случае, главная ось является вертикальной, и вы используете в ней расширенное, поскольку для расширенного необходимо ограничение, чтобы ограничить его расширение, вы должны были удалить эту расширенную вещь или просто обернуть контейнер в SizedBox для Speci c высота.

Чем вы можете обернуть коробку размера в любой подходящий вам контейнер с прокруткой.

Надеюсь, это поможет!

Answer 2

В вашем коде измените Column на ListView и удалите расширенный виджет. Вы можете использовать фиксированную высоту или MediaQuery.of (context) .size.height * (любое отношение) к контейнерам, или просто не указывать высоту контейнера, поэтому он будет принимать высоту его дочерних элементов.

здесь код будет выглядеть так:

body: ListView(
    shrinkWrap: true,
    children: <Widget>[
      Container(
    //  height: MediaQuery.of(context).size.height * (any ratio) / fixed height
        child: Text(
                  mydata[0][i.toString()],
                  style: TextStyle(fontSize: 16.0, fontFamily: "Quando"),
                ),
      ),
      Container(
        child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    choiceButton('a'),
                    choiceButton('b'),
                    choiceButton('c'),
                    choiceButton('d'),
                  ],
                ),
      ),
      Container(
        alignment: Alignment.topCenter,
        child: Text(showtimer,
                    style: TextStyle(
                        fontSize: 35.0,
                        fontFamily: "Times New Roman",
                        fontWeight: FontWeight.w700)),
      )
    ],
  ),

Answer 3

Попробуйте

1002 *