Flutter动态界面实战：从数据绑定到交互动效的全流程指南

// 1. 定义可监听的数据模型
final countNotifier = ValueNotifier<int>(0);

// 2. 在UI中绑定数据
ValueListenableBuilder(
  valueListenable: countNotifier,
  builder: (context, value, child) {
    return Column(
      children: [
        Text("当前计数：$value"), // 数据变化时自动更新
        ElevatedButton(
          onPressed: () => countNotifier.value++, // 修改数据
          child: const Text("加1"),
        ),
      ],
    );
  },
);

// 1. 定义流（比如模拟一个每秒递增的流）
Stream<int> countStream() => Stream.periodic(const Duration(seconds: 1), (i) => i);

// 2. 绑定流数据
StreamBuilder<int>(
  stream: countStream(),
  initialData: 0, // 初始值
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return Text("出错了：${snapshot.error}");
    }
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator(); // 加载中
    }
    return Text("实时计数：${snapshot.data}"); // 流数据更新时自动刷新
  },
);

class TodoList extends ChangeNotifier {
  final List<String> _todos = [];
  List<String> get todos => _todos;

  void addTodo(String todo) {
    _todos.add(todo);
    notifyListeners(); // 通知UI更新
  }

  void removeTodo(int index) {
    _todos.removeAt(index);
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TodoList(),
      child: const MyApp(),
    ),
  );
}

// 读取状态
final todoList = Provider.of<TodoList>(context);

// 动态列表
ListView.builder(
  itemCount: todoList.todos.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(todoList.todos[index]),
      trailing: IconButton(
        icon: const Icon(Icons.delete),
        onPressed: () => todoList.removeTodo(index), // 修改状态
      ),
    );
  },
);

// 1. 输入框的文本Provider
final phoneNumberProvider = StateProvider<String>((ref) => "");

// 2. 校验结果的Provider（依赖输入框文本）
final phoneValidationProvider = Provider<bool>((ref) {
  final phone = ref.watch(phoneNumberProvider);
  return RegExp(r'^1d{10}$').hasMatch(phone); // 手机号正则校验
});

// 无需Context，直接用ref读取
Widget build(BuildContext context, WidgetRef ref) {
  final phone = ref.watch(phoneNumberProvider);
  final isPhoneValid = ref.watch(phoneValidationProvider);

  return Column(
    children: [
      TextField(
        onChanged: (value) => ref.read(phoneNumberProvider.notifier).state = value,
        decoration: const InputDecoration(labelText: "手机号"),
      ),
      // 实时显示校验结果
      Text(
        isPhoneValid ? "手机号格式正确" : "请输入11位手机号",
        style: TextStyle(color: isPhoneValid ? Colors.green : Colors.red),
      ),
    ],
  );
}

final isLikedNotifier = ValueNotifier<bool>(false);
final likeCountNotifier = ValueNotifier<int>(0);

GestureDetector(
  onTap: () {
    isLikedNotifier.value = !isLikedNotifier.value;
    likeCountNotifier.value += isLikedNotifier.value ? 1 : -1;
  },
  child: Row(
    children: [
      ValueListenableBuilder(
        valueListenable: isLikedNotifier,
        builder: (context, value, child) {
          return Icon(
            Icons.favorite,
            color: value ? Colors.red : Colors.grey, // 状态变化→颜色变化
          );
        },
      ),
      ValueListenableBuilder(
        valueListenable: likeCountNotifier,
        builder: (context, value, child) => Text("$value"),
      ),
    ],
  ),
);

final isExpandedNotifier = ValueNotifier<bool>(false);

GestureDetector(
  onTap: () => isExpandedNotifier.value = !isExpandedNotifier.value,
  child: ValueListenableBuilder(
    valueListenable: isExpandedNotifier,
    builder: (context, value, child) {
      return AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        height: value ? 200 : 100, // 状态变化→高度变化
        width: double.infinity,
        margin: const EdgeInsets.symmetric(16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: const [BoxShadow(blurRadius: 4, color: Colors.black12)],
        ),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text("卡片标题"),
              if (value) const Text("展开后的详细内容..."), // 状态变化→显示隐藏内容
            ],
          ),
        ),
      );
    },
  ),
);

// 列表页的商品卡片
Hero(
  tag: "product_${product.id}", // 唯一标识，两边要一致
  child: Image.network(product.imageUrl),
),

// 详情页的商品图片
Hero(
  tag: "product_${product.id}",
  child: Image.network(product.imageUrl),
),

@override
void dispose() {
  _streamController.close();
  super.dispose();
}

AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Transform.rotate(
      angle: _controller.value * 2 * pi,
      child: child, // 不变的子元素，只构建一次
    );
  },
  child: const Icon(Icons.refresh), // 不变的部分
);