Во Flutter, как разместить ListView внизу экрана

Question

Я новичок во Flutter. Как сохранить ListView внизу экрана во Flutter? Я пытаюсь поместить 2 виджета в столбец и поставить Expanded вокруг первого виджета (Text), чтобы он занимал оставшийся экран и ListView внизу. Но ничего не появляется. Если я заменю ListView текстовым виджетом, он заработает. Не уверен, что нужно сделать, чтобы ListView оставался внизу.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(children: <Widget>[
            Expanded(
              child: Text('Here I\'m taking all the space.'),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: MyWidget(),
              //child: Text("if use Text widget, it works"),
            ),
          ]),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(scrollDirection: Axis.horizontal, children: _getListIcon());
  }

  _getListIcon() {
    List<Widget> widgets = [];
    for (int i = 0; i < 10; i++) {
      widgets.add(RaisedButton(
          onPressed: () => {},
          color: Colors.orange,
          padding: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[Icon(Icons.add), Text("Add")],
          )));
    }
    return widgets;
  }
}

Answer 1

Не вижу проблем.

Предлагаю некоторые улучшения кода

Вам не нужно использовать виджет Выровнять в Столбец

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(children: <Widget>[
             Spacer(),
             MyWidget(),
          ]),
        ),
      ),
    );
  }
}

Вот так, и если вы хотите сделать список фиксированной высоты, если он был пустым, используйте SizedBox вот так:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(children: <Widget>[
             Spacer(),
             SizedBox(height:50,child:MyWidget()),
          ]),
        ),
      ),
    );
  }
}

Answer 2

вместо использования виджета «Выравнивание» попробуйте изменить выравнивание по оси столбца следующим образом:

Column(
   mainAxisAlignment: MainAxisAlignment.end
   children: <Widget>[
      Expanded(
         child: Text('Here I\'m taking all the space.'),
      ),
      YourListView(),
    ],
),

это работает и для поперечной оси. Для справки вы можете взглянуть на документацию по флаттеру для Column и MainAxisAlignment

Надеюсь, это решит вашу проблему.