Сделайте столбец в ListView / SingleChildScrollView, чтобы он занимал ОСТАВШЕЕ место на экране - PullRequest
Новая
       4

Сделайте столбец в ListView / SingleChildScrollView, чтобы он занимал ОСТАВШЕЕ место на экране

0 голосов
/ 21 июня 2020

Я пытаюсь создать экран регистрации, концепция, которую я разработал для Adobe XD, заключается в том, что на экране регистрации будет приложение lo go в центре вверху, карточка примерно с 3-4 текстовыми полями / областями, кнопка внизу в центре. Поскольку будет несколько карточек для заполнения, я хочу, чтобы в центре был круговой индикатор страницы, чтобы пользователю было проще отслеживать оставшиеся данные для заполнения, а также пользователю не нужно заполнять действительно длинный список на одном экране.

То, что я пробовал, - это SingleChildScrollView со столбцом внутри, и столбец имеет первую регистрационную форму для заполнения и другой столбец внутри нее, в котором есть кнопка с индикатором страницы

Стек и построитель просмотра страниц, это дало мне лучшие результаты с точки зрения макета, но единственная проблема заключается в том, что при использовании клавиатуры виджеты будут вызывать переполнение renderFlew

и прямо сейчас список с формой в нем и столбец с кнопкой и индикатором страницы

Вещи, которые мне нужны:

  • клавиатура, чтобы не вызывать проблем с формой
  • код, который будет практичным и согласованным для экранов разных размеров

мой последний код 

@override
  Widget build(BuildContext context) {
    List<Widget> registrationForms = [EmailRegistrationForm()];
    return Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
        body: ListView(
          children: <Widget>[
            Align(alignment: Alignment.center, child: registrationForms[0]),
            Container(
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 5),
                    child: InkWell(
                      child: Text("Already have an account? Login!"),
                    ),
                  ),
                  PrimaryStyledButton(text: "Next", onPress: () {}),
                  CirclePageIndicator(
                    currentPageNotifier: _currentPageNotifier,
                    itemCount: registrationForms.length,
                    selectedDotColor: Theme.of(context).accentColor,
                  )
                ],
              ),
            ),

          ],
        ));
  }

что ожидается

Ответы [ 2 ]

1 голос
/ 22 июня 2020
• 1000 SingleChildScrollView предназначен для устранения проблемы с клавиатурой, подталкивающей элементы, а также для предоставления возможности прокрутки при заполнении данных 
return Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
        body: SingleChildScrollView(
          child: SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(bottom: 10),
                  child: landingScreen.getLogoWidget(),
                ),
                Expanded(
                  child: Align(
                      alignment: Alignment.center, child: registrationForms[0]),
                ),
                Padding(
                  padding: EdgeInsets.only(bottom: 10),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 5),
                        child: InkWell(
                          child: Text(ALREADY_REGISTERED_MSG),
                        ),
                      ),
                      PrimaryStyledButton(text: NEXT, onPress: () {
                      }, ),
                      Padding(
                        padding: EdgeInsets.symmetric(vertical: 8.0),
                        child: CirclePageIndicator(
                          currentPageNotifier: _currentPageNotifier,
                          itemCount: registrationForms.length,
                          selectedDotColor: Theme.of(context).accentColor,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ));
0 голосов
/ 21 июня 2020

Попробуйте использовать SingleChildScrollView с расширенным виджетом 

  @override
  Widget build(BuildContext context) {
    List<Widget> registrationForms = [EmailRegistrationForm()];
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: SingleChildScrollView(
        child: Expanded(
          child: Column(
            children: <Widget>[
              Align(alignment: Alignment.center, child: registrationForms[0]),
              Container(
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(top: 5),
                      child: InkWell(
                        child: Text("Already have an account? Login!"),
                      ),
                    ),
                    PrimaryStyledButton(text: "Next", onPress: () {}),
                    CirclePageIndicator(
                      currentPageNotifier: _currentPageNotifier,
                      itemCount: registrationForms.length,
                      selectedDotColor: Theme.of(context).accentColor,
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
...