问题[listview]

ListView 传递了一个列表。有必要通过点击从这个 ListView 中删除一个元素。当 ListView builder 的参数没有指定key:或指定时，GlobalKey()那么当 list 元素被删除时，元素的编号飞快，列表在视觉上正确显示，但是如果你尝试编辑某些元素，那么这样的元素会有不正确的数据。例如，如果在 ListView 构建器中指定了某些唯一标识符，key: UniqueKey()则 ListView 元素的行为变得正确且可预测，但在删除任何元素后，列表将自动滚动到最开始，到它的第一个元素。我想从 ListView 中删除一个元素，以便之后它的行为是正确的，并且 ListView 本身不会滚动到最开始。

在这里，我存储了一个列表，我将其传递给 ListView

List<Channel> _editorChannels;

这就是我删除元素的方式。我通过唯一 ID 在列表中查找它并将其删除。

onDelete(Channel c) {
    final f = _editorChannels.firstWhere((element) => element.Id == c.Id,
        orElse: () => null);
    if (f != null) setState(() => _editorChannels.remove(f));
  }

这就是 ListView 的样子，它位于 DefaultTabController 选项卡之一中，我将仅简要显示一个选项卡的代码，以免代码过多。

      Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                child: Scaffold(
                  body: ListView.builder(
                      key: UniqueKey(),
                      itemCount: _editorChannels == null
                          ? 0
                          : _editorChannels.length,
                      itemBuilder: (context, index) {
                        final item = _editorChannels[index];
                        return Card(
                          shadowColor: Colors.black26,
                          margin: EdgeInsets.all(3.0),
                          clipBehavior: Clip.antiAlias,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(2),
                          ),
                          child: ListTile(
                              title: Container(
                                  child: Text(
                                item.Name != null ? item.Name : '',
                                style: new TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 16.0),
                              )),
                              subtitle: Text(item.Url),
                              onTap: () => {
                                    Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) =>
                                              ChewieDemo(channel: item)),
                                    )
                                  },
                              isThreeLine: false,
                              leading: getIconbyId(item.Status),
                              trailing: PopMenuWidget(
                                channel: item,
                                onDelete: () => onDelete(item),
                                onUpdate: (item) => onUpdate(item),
                              )),
                        );
                      }),
                ),
              )
            ],
          ),

我有一个 REST 应用程序，它从站点获取逐页信息并将其转换为 ListView 列表。当到达滚动结束时触发需要接收新部分数据的事件，看起来像这样

_controller.addListener(() {

   //При достижении конца прокрутки
    if (_controller.position.atEdge) {

        //Запрашиваю новую порцию  данных
    }
});

我希望数据不是在屏幕的最后被请求，而是更早一点，这样用户就不必等待新的数据部分加载，它们会在后台被抽出。为此，我尝试了此选项

 _controller.addListener(() {

    //Сравниваю текущую позицию скролинга списка с максимальной минус какоё-то значение, что-бы  срабатывало заранее
    if (_controller.position.pixels >=  _controller.position.maxScrollExtent-200) {
     
       //Запрашиваю новую порцию  данных

     }
 });

也就是说，它确定了当前的滚动位置，并将其与最大的位置进行比较，但要早一点，相差 200 像素。这个选项不起作用，因为返回JSON数据的函数是异步工作的，并且事件触发多次，你在几秒钟内得到10-15个请求，这些请求是随机处理的，不严格的顺序，并且数据是混合的因为这

我尝试了该选项_controller.position.pixels == _controller.position.maxScrollExtent-200，但它根本不起作用，因为当前位置的滚动非常准确，根本不可能进入这个值，事件根本不起作用。有没有办法让事件在列表的某个部分提前触发一次，在它完成之前，一种延迟加载？

1. 如何创建ListView仅在特定区域可见的小部件？

在图片Listview中，元素仅在矩形中可见

为什么我需要这个小部件？

我想创建这样一个小部件，以便在滚动某个小部件时，我可以scrollNotification.metrics.pixels为该小部件从屏幕顶部的平滑退出设置动画。

为了让这个小部件中的元素发生漂亮的变化（旧文本向上，新文本从底部出来），我相信ListView这是最简单的方法。

2. 我想知道。也许这个小部件有某种已经存在的名称，并且它已经在 pub.dev 中。

是否有某种方法可以对齐中间元素（时间），使其在每个图块中处于同一水平？

编码：

                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Align(
                      alignment: Alignment.bottomLeft,
                      child: Text(
                        element['deadline'],
                        style: TextStyle(
                          color: element['overdue'] ? Colors.redAccent : null,
                          fontWeight: FontWeight.bold
                        ),
                      ),
                    ),

                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Text(element['estimate'], style: TextStyle(color: Colors.blueAccent),),
                    ),
                    Align(
                      alignment: Alignment.bottomRight,
                      child: Text(element['stage_id']),
                    ),

                ],),

更新：

child: Container(
                    padding: EdgeInsets.all(10),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 3,
                          child: Text(
                            element['deadline'],
                            style: TextStyle(
                                color: element['overdue']
                                    ? Colors.redAccent
                                    : null,
                                fontWeight: FontWeight.bold),
                            textAlign: TextAlign.left
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: Text(
                            element['estimate'],
                            style: TextStyle(color: Colors.blueAccent),
                            textAlign: TextAlign.right
                          ),
                        ),
                        Expanded(
                          flex: 4,
                          child: Text(element['stage_id'], textAlign: TextAlign.right,),
                        ),
                      ],
                    ),
                  ),

你需要为此发送一个post请求你需要收集Map中所有TextFiel的值你需要做什么TextEditingController是body测试数据，据我了解，更改字段时，你需要向地图添加一个值。如何做得更好请告诉我。

class CreateOrderWidget extends StatefulWidget {

  CreateOrderWidget({Key key}) : super(key: key);
  @override
  _CreateOrderWidgetState createState() => _CreateOrderWidgetState(); 
  }


class _CreateOrderWidgetState extends State<CreateOrderWidget> {

    final formatdate = DateFormat("dd-MM-yyyy");
    final formattime = DateFormat("HH:mm"); 


    Map<String, dynamic> body = {'title':'Hello','adress':'Hello','task':'Hello','times':'Hello','dates':'Hello','city':'Hello','views':    'Hello','status':'Hello','worker':'Hello','name':'Hello','phone': 'Hello','price': 'Hello','stavka':'Hello','userid': 'Hello'};
    // dataform = '{"title":"Hello","adress":"Hello","task":"Hello","times":"Hello","dates":"Hello","city":"Hello","views": "Hello","status":"Hello","worker":"Hello","name":"Hello","phone": "Hello","price": "Hello","stavka":"Hello","userid": "Hello"}';
    void  postApi() async {
    var   catJson = await CatAPI().addOrderApi(body);
    setState(() {
      print(catJson);  
    });
  }


  @override
  void initState() {
    super.initState();
    postApi();
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Container(
        decoration: BoxDecoration(
          color: Color.fromARGB(255, 255, 255, 255),
        ),
        child: Container(

        child: SingleChildScrollView(
       padding: const EdgeInsets.symmetric(horizontal: 36.0),

      child: Column(

        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[

        SizedBox(height: 10.0),
        Row(
        children:<Widget>[
          Text("Создание заказа" ,style: TextStyle(
                color: Color.fromARGB(255, 0, 0, 0),
                fontWeight: FontWeight.w400,
                fontSize: 23,
              ),),]),

          SizedBox(height: 18.0),
          TextFormField(
            keyboardType: TextInputType.text,
            maxLength: 10,
            decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Название задачи',
                prefixText: '',
                suffixText: '',
                suffixStyle: TextStyle(color: Colors.green)),
            maxLines: 1,
          ),

          SizedBox(height: 18.0),
          TextFormField(
             maxLength: 200,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Опишите задачу подробно',
              helperText: 'Максимум 200 символов.',
              labelText: 'Подробное описание задачи',
            ),
            maxLines: 3,
          ),

/////////////////////////////////////////////////////////////////
              SizedBox(height: 18.0),
              DateTimeField(
              decoration: const InputDecoration(
              border: OutlineInputBorder(),
              icon: Icon(Icons.date_range),
              labelText: 'Укажите дату выполнения работ',
              prefixText: '',
              suffixText: '',
              suffixStyle: TextStyle(color: Colors.green)),
              format: formatdate,           
              onShowPicker: (context, currentValue) {
              return showDatePicker(
              context: context,
              firstDate: DateTime(1900),
              initialDate: currentValue ?? DateTime.now(),
              lastDate: DateTime(2100));
              },),

 //////////////////////////////////  
             SizedBox(height: 18.0),           
             DateTimeField(
             format: formattime,
             decoration: const InputDecoration(
              border: OutlineInputBorder(),
              icon: Icon(Icons.timer),
              labelText: 'Укажите время выполнения работ',
              prefixText: '',
              suffixText: '',
              suffixStyle: TextStyle(color: Colors.green)),
             onShowPicker: (context, currentValue) async {
             final time = await showTimePicker(
              context: context,
            initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
             );
            return DateTimeField.convert(time);
             },
             ),
//////////////////////////////////////////////////     
          SizedBox(height: 18.0),
          TextFormField( 
              maxLength: 2,
              decoration: const InputDecoration(
              border: OutlineInputBorder(),
              icon: Icon(Icons.people),
              labelText: 'Сколько нужно человек?',
              prefixText: '',
              suffixText: '',
              suffixStyle: TextStyle(color: Colors.green)),
              keyboardType: TextInputType.number,
          ),

          SizedBox(height: 18.0),
          TextFormField(
            maxLength: 6,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(
                icon: Icon(Icons.payment),
                border: OutlineInputBorder(),
                labelText: 'Укажите оплату на человека в час',
                prefixText: '',
                suffixText: 'Руб',
                suffixStyle: TextStyle(color: Colors.green)),
                maxLines: 1,
          ),


          SizedBox(height: 18.0),
          TextFormField(
            maxLength: 30,
            keyboardType: TextInputType.text,
            decoration: const InputDecoration(
                icon: Icon(Icons.gps_fixed),
                border: OutlineInputBorder(),
                labelText: 'Адрес',
                prefixText: '',
                suffixText: '',
                suffixStyle: TextStyle(color: Colors.green)),
                maxLines: 1,
          ),

          SizedBox(height: 24.0),
           RaisedButton(
           color: Colors.blue,
           child: Text("Отправить",style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w400,
                fontSize: 14,
              ),),
           onPressed: (){postApi();},
           ),
        ],
      ),

         ),
        ),
      ),
       );
  }
}