SingleChildScrollView для столбца внутри столбца - PullRequest
Новая
       29

SingleChildScrollView для столбца внутри столбца

0 голосов
/ 06 мая 2020

На картинке ниже я пытаюсь достичь зеленой части Scrollable, поскольку в случае, если клавиатура выскакивает, она не выдает мне ошибки рендеринга.

Весь экран представляет собой просто Column, где желтая часть - это настраиваемый виджет, а зеленая часть - еще одна Column внутри него.

Я пробовал разные решения. Оберните весь столбец в SingleChildScrollView, но я бы хотел, чтобы желтая часть оставалась зафиксированной вверху. Я пробовал также обернуть только зеленую часть в SingleChildScrollView, но это не работает (ошибка рендеринга все еще возникает).

Я видел, что могу использовать SliverAppBar, но я хотел бы добиться используя свой собственный виджет (желтая часть).

Я немного застрял. 

Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            AppBarWidget(height: size.height * 0.15),
            Container(
              height: size.height - size.height * 0.15 - mediaQuery.padding.top,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  EditableAvatarWidget(
                    circleRadius: circleRadius,
                    badge: test,
                    border: Border.all(color: test.mainColor, width: 5),
                  ),
                  Column(
                    children: [
                      Text(
                        "Name Surname",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 26,
                            color: Global.blackGrey),
                      ),
                      SizedBox(height: 10),
                      Text(
                        "mail@mail.com",
                        style: TextStyle(fontSize: 18, color: Colors.grey),
                      )
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(
                        horizontal: size.width / 6, vertical: 0),
                    child: FlatCustomButton(
                      onPress: () {},
                      background: Global.editProfileButton,
                      text: "Edit profile",
                      textColor: Global.blackGrey,
                      inkwellColor: Colors.black,
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );

Возможно, я бы тоже подумал о реализации ListView (?), но, как вы можете видеть, я установил внутри столбца mainAxisAlignment: MainAxisAlignment.spaceAround, чтобы уже иметь мои предпочтения пользовательского интерфейса.

У вас есть идеи, как я могу этого добиться?

TL; DR: разрешить прокрутку только GreenPart (столбец ), которые принадлежат другому столбцу (весь экран), и пусть желтая часть остается в этой фиксированной позиции

Picture

Ответы [ 2 ]

1 голос
/ 06 мая 2020

Вы можете использовать SliverAppBar , как вы уже пробовали, но внутри у вас есть flexibleSpaceBar , у которого есть свойство background, которое может принимать любые виджеты.

A пример кода здесь .

0 голосов
/ 06 мая 2020

Вот как я исправил.

Я инкапсулировал часть зеленого столбца в Extended раньше, а затем в SingleChildScrollView. Он работает именно так, как я хотел.

Теперь прокручивается только зеленая часть, а желтая часть остается в фиксированном положении при появлении клавиатуры.

Код: 

 return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            AppBarWidget(
              height: size.height * 0.15,
            ),
            Expanded( //This 
              child: SingleChildScrollView( // and this fixed my issue
                child: Container(
                  height:
                      size.height - size.height * 0.15 - mediaQuery.padding.top,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      EditableAvatarWidget(
                        circleRadius: circleRadius,
                        badge: test,
                        border: Border.all(color: test.mainColor, width: 5),
                      ),
                      Column(
                        children: [
                          Text(
                            "Name Surname",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 26,
                                color: Global.blackGrey),
                          ),
                          SizedBox(height: 10),
                          Text(
                            "mail@mail.com",
                            style: TextStyle(fontSize: 18, color: Colors.grey),
                          )
                        ],
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: size.width / 6, vertical: 0),
                        child: FlatCustomButton(
                          onPress: () {},
                          background: Global.editProfileButton,
                          text: "Edit profile",
                          textColor: Global.blackGrey,
                          inkwellColor: Colors.black,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
...