在Flutter中，如何将ListView放置在屏幕底部 [英] In Flutter, how to place a ListView at the bottom of the screen

问题描述

我是Flutter的新手.如何在Flutter中将ListView保留在屏幕底部?我尝试将2个小部件放在一列中，并在第一个小部件(文本)周围放置Expanded，这样它应该占据其余屏幕，并在底部占据ListView.但是什么都没有出现.如果我将ListView替换为Text小部件，它将起作用.不确定将ListView放在底部将需要什么.

I'm new to Flutter. How to keep a ListView at the bottom of the screen in Flutter ? I try to put 2 widgets inside a column and put Expanded around the first widget(Text) so it should takes up the remaining screen and the ListView at bottom. But nothing shows up. If I replace the ListView with a Text widget, it works. Not sure what will take to keep the ListView at the bottom.

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;
  }
}

推荐答案

我看不到任何问题.

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

I suggest some improvements to the code

您无需在列

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 像这样:

Just like that, and if you wanted to make the list a fixed height if it was empty use SizedBox like this:

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

这篇关于在Flutter中，如何将ListView放置在屏幕底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！