Flutter - просмотр списка на прокручиваемой странице

Question

Я хотел бы создать прокручиваемую страницу со списком различных виджетов (в виде списка). По сути, моя идея заключалась в следующем:

SingleChildScrollView (Контейнер (Столбец (... Расширенный ( ListView))))

Однако это работает только с фиксированной высотой контейнера. Есть ли способ динамически изменять высоту контейнера в зависимости от того, сколько виджетов отображает список?

PS: Я сделал просмотр списка не прокручиваемым, так как вся страница уже прокручивается через SingleChildScrollView.

Надеюсь, кто-то может здесь помочь.

Заранее большое спасибо, Николас

Код:

class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
          child: Container(height: 2000, child:
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(child: PostList()),
],),),);}}

А также:

class _PostListState extends State<PostList> {
  @override
  Widget build(BuildContext context) {    
    final postData = Provider.of<List<PostData>>(context) ?? [];    
    if (postData != null) {
      return ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        itemCount: postData.length,
        itemBuilder: (context, index) {
          return PostTile (postData: postData[index]);
        },);
    } else {
      return Text('loading'); // Check if necessary
}}}

Answer 1

Чтобы достичь того, что вы здесь ищете, вам, вероятно, следует изменить Listiew в Column и удалите Container.

Что-то вроде этого:

class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
           PostList(),
],),);}}

class _PostListState extends State<PostList> {
  @override
  Widget build(BuildContext context) {    
    final postData = Provider.of<List<PostData>>(context) ?? [];    
    if (postData != null) {
      return Column(
        children: ...postData.map((el) => PostTile (postData: el))
      );
    } else {
      return Text('loading'); // Check if necessary
}}}

Answer 2

Если вы хотите получить список разных ListView, попробуйте поставить shrinkWrap: true всем твоим listView дети и добавить physics к нему.

ListView(
    shrinkWrap: false,
    physics: ClampingScrollPhysics(),
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListView.builder(
            itemCount: 3,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  title: Text(
                'Item #$index',
              ));
            },
          ),
          ListView.builder(
            itemCount: 6,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  leading: Icon(Icons.settings),
                  title: Text(
                    'SecondItem #$index',
                  ));
            },
          ),
          ListView.builder(
            itemCount: 6,
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemBuilder: (context, index) {
              return ListTile(
                  dense: false,
                  trailing: Icon(Icons.settings),
                  title: Text(
                    'THIRD ITEM #$index',
                  ),
                  subtitle: Text(
                    'This is third item number $index',
                  ));
            },
          ),
        ],
      ),
    ],
  )