TSR's questions

我的目标是创建一个rename返回类类型本身的方法。但这rename是一个要在基类中定义的接口，以便基类可以使用它。

void main() {
  Cat cat = Cat("Whiskers");
  Dog dog = Dog("Buddy");

  Cat renamedCat = cat.rename("Mittens");
  Dog renamedDog = dog.rename("Max");

  print("Old cat name: ${cat.name}, New cat name: ${renamedCat.name}");
  print("Old dog name: ${dog.name}, New dog name: ${renamedDog.name}");
}

这两个版本都不起作用。

版本 1：

abstract class Animal {
  final String name;

  Animal(this.name);

  T copyWith<T extends Animal>({String? name});
}

class Cat extends Animal {
  Cat(super.name);

  @override
  Cat copyWith({String? name}) {
    return Cat(name ?? this.name);
  }
}

class Dog extends Animal {
  Dog(super.name);

  @override
  Dog copyWith({String? name}) {
    return Dog(name ?? this.name);
  }
}

extension AnimalExtension<T extends Animal> on T {
  T rename(String newName) {
    return copyWith(name: newName);
  }
}

出现此错误：

Cat.copyWith' ('Cat Function({String? name})') isn't a valid override of 'Animal.copyWith' ('T Function<T extends Animal>({String? name})').

版本 2：

abstract class Animal {
  final String name;

  Animal(this.name);

  Animal copyWith({String? name});
}

class Cat extends Animal {
  Cat(super.name);

  @override
  Cat copyWith({String? name}) {
    return Cat(name ?? this.name);
  }
}

class Dog extends Animal {
  Dog(super.name);

  @override
  Dog copyWith({String? name}) {
    return Dog(name ?? this.name);
  }
}

extension AnimalExtension<T extends Animal> on T {
  T rename(String newName) {
   
    return copyWith(name: newName);
  }
}

给出错误：

无法从方法“rename”返回“Animal”类型的值，因为它的返回类型为“T

有一个可行的解决方案，但我不喜欢，它味道很重，因为它是糟糕的编程：

 return copyWith(name: newName) as T; // this just forces it to work

目前已知的 Flutter 限制会导致小部件溢出而Stack无法接收手势事件。

然而，有一种似乎可以通过扩展课程来实现的技巧Stack。

以下是我对这个黑客攻击的更新实现。

class StackTappableOutside extends Stack {
  const StackTappableOutside({
    super.key,
    super.alignment,
    super.textDirection,
    super.fit,
    super.clipBehavior,
    super.children,
  });

  @override
  RenderStack createRenderObject(BuildContext context) {
    return RenderStackTappableOutside(
      alignment: alignment,
      textDirection: textDirection ?? Directionality.of(context),
      fit: fit,
      clipBehavior: clipBehavior,
    );
  }
}

class RenderStackTappableOutside extends RenderStack {
  RenderStackTappableOutside({
    super.alignment,
    super.textDirection,
    super.fit,
    super.clipBehavior,
    super.children,
  });

  @override
  bool hitTest(BoxHitTestResult result, {required Offset position}) {
    if (hitTestChildren(result, position: position) || hitTestSelf(position)) {
      result.add(BoxHitTestEntry(this, position));
      return true;
    }
    return false;
  }
}

我测试过了，它运行Column良好Row

（可复制，只需复制并粘贴）

import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class StackTappableOutside extends Stack {
  const StackTappableOutside({
    super.key,
    super.alignment,
    super.textDirection,
    super.fit,
    super.clipBehavior,
    super.children,
  });

  @override
  RenderStack createRenderObject(BuildContext context) {
    return RenderStackTappableOutside(
      alignment: alignment,
      textDirection: textDirection ?? Directionality.of(context),
      fit: fit,
      clipBehavior: clipBehavior,
    );
  }
}

class RenderStackTappableOutside extends RenderStack {
  RenderStackTappableOutside({
    super.alignment,
    super.textDirection,
    super.fit,
    super.clipBehavior,
    super.children,
  });

  @override
  bool hitTest(BoxHitTestResult result, {required Offset position}) {
    if (hitTestChildren(result, position: position) || hitTestSelf(position)) {
      result.add(BoxHitTestEntry(this, position));
      return true;
    }
    return false;
  }
}

class TapOutsideStackDemo extends StatefulWidget {
  const TapOutsideStackDemo({super.key});

  @override
  State<TapOutsideStackDemo> createState() => _TapOutsideStackDemoState();
}

class _TapOutsideStackDemoState extends State<TapOutsideStackDemo> {
  List<int> items = [0, 1, 2, 3, 4];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tap Outside Stack Demo'),
      ),
      body: _body(),
    );
  }

  Widget _itemBuilder(int index, int element) {
    final showAddButton = index > 0;
    return StackTappableOutside(
      clipBehavior: Clip.none,
      children: [
        Container(
          child: ListTile(
            title: Text('Todo List Item $element'),
            subtitle: Text('Add a new item after'),
          ),
          decoration: BoxDecoration(
            color: Colors.deepOrange,
            border: Border.all(color: Colors.yellow),
          ),
        ),
        if (showAddButton)
          Positioned(
            top: -24,
            right: 8,
            child: Container(
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.green,
              ),
              child: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  print('add after');
                },
              ),
            ),
          ),
      ],
    );
  }

  Widget _body() {
    return Column(
      children: items.mapIndexed(_itemBuilder).toList(),
    );
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final element = items[index];
        return _itemBuilder(index, element);
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: TapOutsideStackDemo(),
  ));
}

使用上述代码，当您从任何地方点击绿色按钮时，它会打印：

add after
add after
add after

但是，我有一个要求，要将其改为 ，ListView而不是Column。所以我从

  Widget _body() {
    return Column(
      children: items.mapIndexed(_itemBuilder).toList(),
    );
  }

到：

  Widget _body() {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final element = items[index];
        return _itemBuilder(index, element);
      },
    );
  }

突然，绿色按钮只有一半能用。只有底部能用。

我还注意到，如果我们用 包装列表项GestureDetector，那么黑客也会停止工作，即使Column使用之前有效的简单方法。

• 有人能解释一下为什么它在 ListView 上不起作用吗？

• 有什么方法可以强制它在ListView和上工作GestureDetector吗？我需要使用ListView命令式，因为我需要ReorderableListView.builder在之后实现。

在下面的代码中，我预计会出现错误，因为有效负载应该是not await postApi(payload, api);的实例，但 Dart 不会抱怨。该类在后端和前端之间共享，以避免错误，但如果编译器不抱怨，它就没用。如何才能做到这一点？（可能是 Dart 中的另一个错误，是的，但是有解决方法或调整使其工作吗？）FooStringMyRequest

typedef JsonMap = Map<String, dynamic>;

enum ApiRoutes {
  nextDuel,
}

abstract class BaseRequestResponse<I, O> {
  ApiRoutes get api;
  I fromJsonReq(JsonMap json);
  JsonMap toJsonRes(O model);
  O fromJsonRes(JsonMap json);
  JsonMap toJsonReq(I model);
}


class Foo {}

class Bar {}

class MyRequest extends BaseRequestResponse<Foo, Bar> {
  @override
  ApiRoutes get api => ApiRoutes.nextDuel;

  @override
  Foo fromJsonReq(JsonMap json) {
    return Foo();
  }

  @override
  Bar fromJsonRes(JsonMap json) {
    return Bar();
  }

  @override
  JsonMap toJsonReq(Foo model) {
    return {};
  }

  @override
  JsonMap toJsonRes(Bar model) {
    return {};
  }
}

Future<O> postApi<I, O>(I payload, BaseRequestResponse<I, O> api) async {
  return api.fromJsonRes({});
}

void main() {
  callApi();
}

Future<Bar> callApi() async {
  final String payload = 'wrong';
  final api = MyRequest();
  final data = await postApi(payload, api);
  return data;
}