时间戳

首页 > 解决方案 > 如何添加一个按钮以显示在 listview.builder 的末尾

flutter - 如何添加一个按钮以显示在 listview.builder 的末尾

问题描述

当我这样做时，卡片字段出现在按钮的顶部，并且按钮不可见。我可以在页面末尾单独显示按钮，但是当我添加 http get rest api 时，结果是隐藏了按钮。我试图将它包装到容器、行和列等中，但它没有用。如何在列表视图之外声明按钮。

我的代码 -

import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_on_field/Require.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_on_field/Add/AddCompany.dart';



class Company extends StatefulWidget {
  @override
  _CompanyState createState() => _CompanyState();
}

class _CompanyState extends State<Company> {

  List users = [];
  bool isLoading = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this.fetchUser();
  }

  fetchUser() async {
    setState(() {
      isLoading = true;
    });
    var uri = Uri.parse(
        'https://hirana.in/cdnhira/Serv_onfield_v1/customers_list?session=');
    var url = uri.replace(queryParameters: <String, String>{
      'session': "3cef838dc0632988aa9fdc8a0cb4edb4816de789"
    });
    print(url);

    var response = await http.get(url);
    // print(response.body);
    if (response.statusCode == 200) {
      var items = json.decode(response.body)['data'];
      setState(() {
        users = items;
        isLoading = false;
      });
    } else {
      users = [];
      isLoading = false;
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: new AppBar(
        title: Text("Company list",
          textAlign: TextAlign.center,
        ),
        backgroundColor: Colors.blue,

      ),
      body:Stack(
          children: [

            Align(
              alignment: Alignment.bottomCenter,

              child: Container(
                color: Colors.green,
                width: 1000.0,
                child: RaisedButton(onPressed: () {
                  Navigator.push(context, new MaterialPageRoute(
                      builder: (BuildContext context) => AddCompany())
                  );
                },
                    color: Colors.green,
                    child: Text('Add Company', style: TextStyle(color: Colors.black),)),
              ),
            ),
            SizedBox(height: 10),
            getBody(),
          ]
      ),
    );
  }

  Widget getBody() {
    if (users.contains(null) || users.length < 0 || isLoading) {
      return Center(child: CircularProgressIndicator(
        valueColor: new AlwaysStoppedAnimation<Color>(Colors.white),));
    }
    return ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          return getCard(users[index]);
        });
  }

  Widget getCard(item) {
    var phone = item["comp_phone"];
    // ignore: non_constant_identifier_names
    var CompanyName = item['companyname'];
    var createdby = item['created_by_name'];
    var assingto = item['assign_to_name'];
    var createdOn = item['datec'];
    var address = item['address'];
    var person = item['cont_person'];
    return Card(
      elevation: 1.5,
      child: ListTile(

        title: Row(
          children: <Widget>[

            SizedBox(width: 20,),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[

                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    SizedBox(
                        child: Text(CompanyName, style: TextStyle(
                            fontSize: 17, fontWeight: FontWeight.bold),)),
                    SizedBox(width: 210),
                    Container(
                      child: RaisedButton(onPressed: () =>
                      { new MaterialPageRoute(
                          builder: (BuildContext context) => require()),},
                          color: Colors.yellow,
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30.0)
                          ),
                          child: Text("View")),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Container(
                      width: 30,
                      height: 30,
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        borderRadius: BorderRadius.circular(60 / 2),
                      ),
                      child: Icon(Icons.person),
                    ),

                  ],
                ),

                SizedBox(height: 10,),
                Text(person, style: TextStyle(color: Colors.grey),),
                SizedBox(height: 10,),
                Text(phone, style: TextStyle(color: Colors.blue),),
                SizedBox(height: 10,),
                Row(
                  children: [
                    Text("Created by: \t"),
                    Text(createdby, style: TextStyle(color: Colors.grey),)
                  ],
                ),

                SizedBox(height: 10,),
                Row(
                  children: [
                    Text("Assign to: \t"),
                    Text(assingto, style: TextStyle(color: Colors.grey),),
                  ],
                ),

                SizedBox(height: 10,),
                Row(
                  children: [
                    Text("Created on: \t"),
                    Text(createdOn, style: TextStyle(color: Colors.grey),),
                  ],
                ),
                SizedBox(height: 10,),
                Row(
                  children: [
                    Text("Address: \t",
                      style: TextStyle(fontWeight: FontWeight.bold),),
                    Text(address, style: TextStyle(color: Colors.grey),),
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  children: [
                    SizedBox(
                      height: 25,
                      width: 175,
                      child: RaisedButton(
                        child: Text("Add Requirement"),
                        color: Colors.blue,
                        onPressed: () =>
                        { Navigator.push(context, new MaterialPageRoute(
                            builder: (BuildContext context) => require())),
                        },
                      ),
                    ),
                    SizedBox(
                      height: 25,
                      width: 175,
                      child: RaisedButton(
                        child: Text("View Requirement"),
                        color: Colors.yellow,
                        onPressed: () =>
                        { Navigator.push(context, new MaterialPageRoute(
                            builder: (BuildContext context) => require())),
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

标签： flutter

解决方案

首先，请不要为您的宽度/高度使用常量（ListView 中的 SizedBoxes 中的高度除外，因为 ListView 是可滚动的，所以这些都可以）。而是使用

MediaQuery.of(context).size.width/height * [percentage of width you want] - [paddings you applied]

其次，请尝试更多地描述您的问题，我想我确实理解了，但我不确定。我了解您正在尝试做的是在您的 ListView 末尾附加一个小部件。如果这是你想要的，那么你可以这样做：

GetBody 方法：

Widget getBody() {
    if (users.contains(null) || users.length < 0 || isLoading) {
      return Center(child: CircularProgressIndicator(
        valueColor: new AlwaysStoppedAnimation<Color>(Colors.white),));
    }
    return ListView.builder(
        itemCount: users.length + 1,
        itemBuilder: (context, index) {
          return getCard(index);
        });
  }

获取卡方法：

Widget getCard(index) {
    if (index == users.length) {
      return Center(
        child: Container(
          width: MediaQuery.of(context).size.width - 100,
          height: 30,
          child: RaisedButton(
              child: Text("Button"),
              onPressed: () {
                print("pressed");
              }),
        ),
      );
    }
    dynamic item = users[index];
    ...
}

这样，您在列表末尾附加一个元素，它会按应有的方式显示。

推荐阅读