Как разместить ListView под каркасом с заполнением? - PullRequest
Новая
       1

Как разместить ListView под каркасом с заполнением?

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

Я новичок в флаттере и пытался настроить страницу профиля для своего приложения, но мне кажется, что я не совсем понимаю, как эти виджеты флаттера объединяются, прошу прощения, если мой вопрос довольно глупый, но Я искал в Google и не смог заставить это работать. Итак, в основном у меня есть эшафот, который содержит контейнер, который должен отображать информацию профиля (адрес электронной почты, имя и т. Д. c.), Под ним я хотел бы разместить представление списка, но трепетание меня ошеломляет, я могу ' Кажется, я не понимаю, как макеты работают вместе, вот мой код. Когда я пытаюсь выполнить buildPage (), я получаю сообщение об ошибке, что скаффолд имеет бесконечный размер, работает только buildBox (). Я не знаю, как go об этом. Любая помощь приветствуется 

    import 'package:flutter/material.dart';

    class ProfileBox extends StatefulWidget {
      final String userEmail;
      const ProfileBox(this.userEmail);

      @override
      _ProfileBoxState createState() => _ProfileBoxState();
    }

    class _ProfileBoxState extends State<ProfileBox> {


      @override
      Widget build(BuildContext context) {
       return _buildPage();
      }



      Widget _buildBox(){
     return Scaffold(
          body: Align(
            alignment: Alignment.topCenter,
            child: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                return Container(
                      margin: const EdgeInsets.only(top: 20.0),
                      decoration: BoxDecoration(
                      color: Color(0xFF8185E2), border: Border.all(
                      color: Color(0xFF8185E2),
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(20))
                      ),
                  height: constraints.maxHeight / 2.5,
                  width: MediaQuery.of(context).size.width -  (MediaQuery.of(context).size.width * 5)/100,
                   child: Center(
            child: Text(
             widget.userEmail,
              textAlign: TextAlign.center,
            ),
          ),
                );
              },
            ),
          ),
        );
      }


      Widget _buildPage()
      {
        return Column(children: <Widget>[
          _buildBox(),
          _buildList(),

        ],);

      }

      Widget _buildList()
      {
         return ListView(
            children: <Widget>[
              ListTile(
                title: Text('Sun'),
              ),
              ListTile(
                title: Text('Moon'),
              ),
              ListTile(
                title: Text('Star'),
              ),
            ],
          );
      }

}

Ответы [ 2 ]

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

Я только что изменил ваш код с помощью Scaffold, поместив верхний виджет перед SafeArea. Пожалуйста, проверьте приведенный ниже код. 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return _buildPage();
  }

  Widget _buildPage() {
    return SafeArea(
      top: true,
      child: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(top: 20.0),
              decoration: BoxDecoration(
                  color: Color(0xFF8185E2),
                  border: Border.all(
                    color: Color(0xFF8185E2),
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              height: MediaQuery.of(context).size.height / 2.5,
              width: MediaQuery.of(context).size.width -
                  (MediaQuery.of(context).size.width * 5) / 100,
              child: Center(
                child: Text(
                  "YOUR_EMAIL",
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Expanded(
              child: _buildList(),
            )
          ],
        ),
      ),
    );

    Column(
      children: <Widget>[
        //  _buildBox(),
        _buildList(),
      ],
    );
  }

  Widget _buildList() {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text('Sun'),
        ),
        ListTile(
          title: Text('Moon'),
        ),
        ListTile(
          title: Text('Star'),
        ),
      ],
    );
  }
}

И вывод программы, как показано ниже

enter image description here

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

Scaffold Виджет должен быть верхним виджетом, который содержит виджет Column и все дочерние виджеты. Я думаю, вы можете начать изучать, как размещать виджет во Flutter, чтобы лучше понять, как работает виджет, и хорошим местом может быть: https://flutter.dev/docs/development/ui/layout#lay -out-a-widget

Возвращаясь к вашему вопросу, вы можете немного исправить, чтобы он работал: 

class _ProfileBoxState extends State<ProfileBox> {
  @override
  Widget build(BuildContext context) {
    return _buildPage();
  }

  Widget _buildBox() {
    return Align(
      alignment: Alignment.topCenter,
      child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Container(
            margin: const EdgeInsets.only(top: 20.0),
            decoration: BoxDecoration(
                color: Color(0xFF8185E2),
                border: Border.all(
                  color: Color(0xFF8185E2),
                ),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            height: constraints.maxHeight / 2.5,
            width: MediaQuery.of(context).size.width -
                (MediaQuery.of(context).size.width * 5) / 100,
            child: Center(
              child: Text(
                widget.userEmail,
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildPage() {
    return Scaffold(
      body: Column(
        children: <Widget>[
          _buildBox(),
          _buildList(),
        ],
      ),
    );
  }

  Widget _buildList() {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text('Sun'),
        ),
        ListTile(
          title: Text('Moon'),
        ),
        ListTile(
          title: Text('Star'),
        ),
      ],
    );
  }
}
...