简单的计数器使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的计数器使用相关的知识，希望对你有一定的参考价值。
参考技术A 计数器的常用属性和使用步骤分三个字面意思就是重置计数器，其实就理解为设置一个计数器。有两个参数，用空格隔开
参数1：给计数器取名。就是这个first。你也可以自己取名字，一般都用first，second......这样存在多个计数器的时候自己不会迷糊。
参数2：从哪个数开始计数，可正可负，默认0开始，如果是0，计数就从1开始
着重强调：
计数器要设置给计数单位的上级元素
设置计数器的值。两个参数
参数1：名字，不说了，有多个的时候别写错了就行
参数2：这个数字代表计数器每次增加多少，起始值是0，这里是2的话，那计数出来就是
1.3.5.7.。。。。。这样的
这个属性在需要使用计数的同级元素上用的，一会会有例子，不太会说。
用计数器计数的值，配合：before或：after 设置前缀或后缀内容，简单说就是咱们计数肯定是要展示出来的。content就是内容的意思好理解。一般计数都用在类似文章标题1.1 1.2 2.1 2.2 2.3蔗糖的情况，都在一段文字的开头（结尾）。多以配合：before或：after伪类使用
<h1>个人简历</h1>
<h2>基本信息</h2>
<div>
<h2>专业技能</h2>
<div>
<h3>精通html5</h3>
<h4>HTML基本结构</h4>
<h4>文本标签</h4>
<h4>其它高级标签</h4>
</div>
<h3>精通CSS3</h3>
<h3>精通javascript</h3>
<h3>H5专家、高手、🐂人</h3>
</div>
<div>
<h2>求职意向</h2>
<p>HTML高级开发工程师 全职</p>
<p>薪资面议</p>
<p>现已离职，可一周内到岗</p>
</div>
<h2>项目经验</h2>
<h2>教育经历</h2>
<style>
body
/*设置某个元素选择器出现的计数器次数
参数1：给计数器取名
参数2：从哪个数开始计数，可正可负，默认0开始
*/
counter-reset: first 0;
h2:before
/*第二级标题编号*/
/*设置计数器每出现一次 就自增1，可正可负*/
counter-increment: first 1;
/*用计数器计数的值 设置前缀*/
content: counter(first) '、';
/*设置第三级标题编号*/
div
/*定义第二个计数器*/
counter-reset: second 0;
h3:before
counter-increment: second 1;
content: counter(first)'.'counter(second)'、';
h3
margin-left: 40px;
/*设置第四级标题标签*/
div>div
/*添加第三个计数器*/
counter-reset: third 0;
h4:before
counter-increment: third 1;
content:counter(first)'.'counter(second)'.'counter(third)'、';
h4
margin-left: 80px;
</style>
就这样吧，挺有意思的，遇到的问题就是在添加计数器的时候，最开始没有把p标签，h标签包裹在div里，然后就不知道他的父级是谁了，总不能都给body吧，显然不对，所以就把每个标题编号分级用div分开放就ojbk了。OK，还是觉得写的哪里不对，希望大神们多多指教，明天见。
我正在使用 BLOC 制作一个简单的计数器应用程序，但是当我增加/减少计数器时，我的计数器没有更新？我使用 BlocBuilder 构建 UI
【中文标题】我正在使用 BLOC 制作一个简单的计数器应用程序，但是当我增加/减少计数器时，我的计数器没有更新？我使用 BlocBuilder 构建 UI【英文标题】：I am using BLOC to make a simple counter app , but my counter is not updating when I am incrementing / decrementing it? I used BlocBuilder to build UI 【发布时间】：2021-10-31 22:22:43 【问题描述】：我已将 MaterialApp 包装在 BlocProvider 下，并且我已使用 BlocBuilder 构建 UI（计数器文本） 我有两个浮动操作按钮，每个按钮分别调用 Incrementevent() 和 Decrementevent() 但 UI 仍然没有改变。 请提出解决方案。
我的 main.dart 文件
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return BlocProvider(
create: (context) => CounterBloc(),
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key? key, required this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
final _counterBloc = CounterBloc();
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: BlocBuilder<CounterBloc, CounterState>(
builder: (context, state)
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$state.counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
);
,
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => _counterBloc.add(Incrementevent()),
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
SizedBox(width: 10),
FloatingActionButton(
onPressed: () => _counterBloc.add(Decrementevent()),
tooltip: 'Increment',
child: Icon(Icons.add),
),
],
),
);
@override
void dispose()
// TODO: implement dispose
_counterBloc.close();
super.dispose();
我的 counter_event 文件
part of 'counter_bloc.dart';
@immutable
abstract class CounterEvent
class Incrementevent extends CounterEvent
class Decrementevent extends CounterEvent
我的 counter_state 文件
part of 'counter_bloc.dart';
@immutable
abstract class CounterState
final int counter;
const CounterState(this.counter);
class CounterInitial extends CounterState
CounterInitial(int counter) : super(counter);
我的 counter_bloc 文件
import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';
part 'counter_event.dart';
part 'counter_state.dart';
class CounterBloc extends Bloc<CounterEvent, CounterState>
CounterBloc() : super(CounterInitial(0));
@override
Stream<CounterState> mapEventToState(
CounterEvent event,
) async*
if (event is Incrementevent)
yield CounterInitial(state.counter + 1);
else if (event is Decrementevent)
yield CounterInitial(state.counter - 1);
【问题讨论】：
使用 StreamBuilder 而不是 BlocBuilder。 我认为你的状态类中缺少equatable 包
【参考方案1】：
TL;DR 您正在创建同一个 BLoC 的两个实例，因此通过在一个 BLoC 上触发事件，另一个 BLoC 不会得到更新。
在 MyApp 小部件中，您创建一个 BLoC 实例并使用 BlocProvider 将其提供给小部件树 - 这里一切都很完美。
但是，在_MyHomePageState 中，您正在创建相同CounterBloc 的另一个实例并使用它来添加事件。这意味着，您在与之前提供的不同的 BLoC 上进行操作。
要解决这个问题，您应该获取注入的 BLoC 实例并对其进行操作。由于 BLoC 库依赖于 provider，因此您可以像这样解析注入的 BLoC：
@override
Widget build(BuildContext context)
final counterBloc = context.watch<CounterBloc>();
...
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => counterBloc.add(Incrementevent()),
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
SizedBox(width: 10),
FloatingActionButton(
onPressed: () => counterBloc.add(Decrementevent()),
tooltip: 'Increment',
child: Icon(Icons.add),
),
],
),
...
或者这个：
@override
Widget build(BuildContext context)
...
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Incrementevent()),
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
SizedBox(width: 10),
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Decrementevent()),
tooltip: 'Increment',
child: Icon(Icons.add),
),
],
),
...
【讨论】：
以上是关于简单的计数器使用的主要内容，如果未能解决你的问题，请参考以下文章
我正在使用 BLOC 制作一个简单的计数器应用程序，但是当我增加/减少计数器时，我的计数器没有更新？我使用 BlocBuilder 构建 UI