Flutter中，如何在屏幕底部放置一个ListView答案

【问题标题】：In Flutter, how to place a ListView at the bottom of the screenFlutter中，如何在屏幕底部放置一个ListView
【发布时间】：2020-11-26 03:21:30
【问题描述】：

我是 Flutter 的新手。如何在 Flutter 中将 ListView 保持在屏幕底部？我尝试将 2 个小部件放在一列中，并将 Expanded 放在第一个小部件（文本）周围，因此它应该占据剩余的屏幕和底部的 ListView。但什么也没有出现。如果我用 Text 小部件替换 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;
  }
}

【问题讨论】：

标签： flutter listview dart layout

【解决方案1】：

尝试更改列轴上的对齐方式，而不是使用对齐小部件，如下所示：

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

这也适用于横轴。作为参考，您可能需要查看 Column 和 MainAxisAlignment 的颤振文档

我希望这能解决你的问题。

【讨论】：

这不起作用 - 颤振报告为问题

【解决方案2】：

我没有发现任何问题。

我建议对代码进行一些改进

您不需要在 Column

中使用 Align 小部件

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()),
          ]),
        ),
      ),
    );
  }
}

【讨论】：