Question

我在这里有一个带有bottomNavigationBar的简单listview示例，我需要在listview到达末尾（bootom滚动）时出现新按钮。我应该以某种方式将按钮放入listview还是有其他方法？

这是完整的示例，因此“测试”按钮在滚动结束时不会一直显示。.

import 'package:flutter/material.dart';
import 'listview_column.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      //home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: ListViewColumn(),
    );
  }
}

listview类

import 'package:flutter/material.dart';

class ListViewColumn extends StatelessWidget {
  final List<String> _listViewData = [
    "A List View with many Text - Here's one!",
    "A List View with many Text - Here's another!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's one!",
    "A List View with many Text - Here's another!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's one!",
    "A List View with many Text - Here's another!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's one!",
    "A List View with many Text - Here's another!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
    "A List View with many Text - Here's more!",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView in Column Example'),
      ),
      body: Column(
        children: <Widget>[

          Expanded(
            child: ListView(
              physics: ClampingScrollPhysics(),
              padding: EdgeInsets.all(10.0),
              children: _listViewData.reversed.map((data) {
                return Column(
                  children: <Widget>[
                    ListTile(
                      title: Text(data),
                    ),
                  ],
                );
              }).toList(),
            ),
          ),
          FlatButton(
            child: Text('test'),
            onPressed: (){},
          ),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        color: Color.fromRGBO(121, 85, 72, 1.0),
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[

              InkWell(
                  splashColor: Color.fromRGBO(78, 53, 43, 0),
                  highlightColor: Color.fromRGBO(78, 53, 43, 1),
                  onTap: () {

                  },
                  child: Padding(
                    padding: EdgeInsets.only(
                        top: 15.0, bottom: 15.0, left: 40.0, right: 40.0),
                    child: Text(
                      'Finish - Create Report',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                          fontWeight: FontWeight.w600),
                    ),
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以将ScrollController与侦听器一起使用，以便在到达列表末尾时使用setState将按钮添加到_listViewData中。（不要忘记将控制器添加到您的ListView中）

ScrollController controller;

@override
void initState() {
    super.initState();
    controller = ScrollController()..addListener(_scrollListener);
}

_scrollListener() {
    if (controller.position.pixels == controller.position.maxScrollExtent) {
      addButtonToList();
    }
}

Answer 2

您可以使用SingleChildScrollView包裹列。该按钮将始终出现在ListView滚动的结尾处。

/* Scaffold */
body: SingleChildScrollView(
        physics: ClampingScrollPhysics(),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListView(
              physics: NeverScrollableScrollPhysics(),
              padding: EdgeInsets.all(10.0),
              shrinkWrap: true,
              children: _listViewData.reversed.map((data) {
                return Column(
                  children: <Widget>[
                    ListTile(
                      title: Text(data),
                    ),
                  ],
                );
              }).toList(),
            ),
            FlatButton(
              child: Text('test'),
              onPressed: (){},
            ),
          ],
        ),
      ),
/* Scaffold */

Answer 3

使用Dart 2.5，您可以执行以下操作：

ListView(
  children: <Widget>[
    ..._listViewData,
      FlatButton(
        child: Text('test'),
          onPressed: (){},
        ),
    ]
)

Listview拉起按钮/小工具

3 个答案: