教程教练马克 – 目标内容溢出屏幕

huangapple
go评论71阅读模式
英文:

Tutorial Coach Mark - TargetContent is overflowing the screen

问题

我注意到，在我的应用程序中使用教程教练标记进行导览时，我注意到，根据焦点中内容的大小，焦点和目标内容之间的距离会变大。这个问题导致了溢出，影响了使用。

请观看视频，并注意当内容较大时的空间差异。如果空间较小，描述（目标内容）就不会溢出：（我还展示了按钮在焦点上时的小空间，以查看空间差异）

教程教练马克 – 目标内容溢出屏幕 - - - -
教程教练马克 – 目标内容溢出屏幕

the code:

showTour(){
    initTargets();
    tutorialCoachMark = TutorialCoachMark(
        targets: targets,
        hideSkip: true,
        paddingFocus: 0
    )..show(context: context, rootOverlay: true);
  }

initTargets(){
    targets = [
      TargetFocus(
          identify: "qr-code-key",
          keyTarget: barCodeKey,
          contents: [
            TargetContent(
                align: ContentAlign.bottom,
                builder: (context, controller) {
                  return CoachMarkDescription(
                    text: "Ou utilize o leitor de código de barras. Basta clicar no ícone e apontar a câmera para o equipamento.",
                    margin: EdgeInsets.only(left: 70, right: 10),
                    onNext: (){
                      // setState(() {
                      //   isTutorialFocusForm = true;
                      // });
                      controller.next();
                    },
                    onSkip: (){
                      controller.skip();
                      if(widget.isRevisitTour == true) {
                        _setFlagToShowRegistrationEquipmentTour(false);
                        Navigator.of(context).pop();
                      }
                    },
                  );
                }),
          ]
      ),

      TargetFocus(
          identify: "form-key",
          keyTarget: formKey,
          shape: ShapeLightFocus.RRect,
          contents: [
            TargetContent(
                builder: (context, controller) {
                  return Positioned(
                    top: 20,
                    child: CoachMarkDescription(
                      text: "Preencha todos os campos e insira o arquivo da sua nota fiscal.",
                      margin: EdgeInsets.only(left: 40, right: 40),
                      onNext: (){
                        controller.next();
                      },
                      onSkip: (){
                        controller.skip();
                        if(widget.isRevisitTour == true){
                          _setFlagToShowRegistrationEquipmentTour(false);
                          Navigator.of(context).pop();
                        }
                      },
                    ),
                  );
                }),
          ]
      ),

      TargetFocus(
          identify: "register-button-key",
          keyTarget: registerButtonKey,
          shape: ShapeLightFocus.RRect,
          contents: [
            TargetContent(
                align: ContentAlign.top,
                builder: (context, controller) {
                  return CoachMarkDescription(
                    text: "Clique em “cadastrar”, para prosseguir e seu equipamento será listado.",
                    margin: EdgeInsets.only(left: 40, right: 40),
                    isFinish: true,
                    onSkip: (){
                      controller.skip();
                      if(widget.isRevisitTour == true){
                        _setFlagToShowRegistrationEquipmentTour(false);
                        Navigator.of(context).pop();
                      }
                    },
                  );
                }),
          ]
      ),
    ];
  }

CoachMarkDescription类代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CoachMarkDescription extends StatefulWidget {
  final String text;
  final String skip;
  final String next;
  final bool? isFinish;
  final EdgeInsets margin;
  final Function? onSkip;
  final Function? onNext;

  const CoachMarkDescription({
    Key? key,
    required this.text,
    this.skip = "Pular",
    this.next = "Próximo",
    this.onSkip,
    this.onNext,
    required this.margin,
    this.isFinish
  }) : super(key: key);

  @override
  State<CoachMarkDescription> createState() => _CoachMarkDescriptionState();
}

class _CoachMarkDescriptionState extends State<CoachMarkDescription> {
  bool isFinish = false;

  @override
  Widget build(BuildContext context) {
    if(widget.isFinish == true){
      isFinish = true;
    }
    return Container(
      // width: 256,
      padding: EdgeInsets.only(top: 20, left: 20, right: 20, bottom: 20),
      margin: widget.margin,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10)
      ),

      child: Column(
        children: [
          Text(
            widget.text,
            textAlign: isFinish ? TextAlign.center : TextAlign.left,
            style: TextStyle(
              fontSize: 14,
              fontFamily: "OpenSans",
              color: Color.fromRGBO(51, 51, 51, 1)
            ),
          ),

          SizedBox(height: 20),

          !isFinish ?
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                onTap: (){
                  widget.onSkip!();
                },
                child: Text(
                  "PULAR",
                  style: TextStyle(
                      fontSize: 14,
                      fontFamily: "OpenSans",
                      color: Color.fromRGBO(51, 51, 51, 1)
                  ),
                ),
              ),

              GestureDetector(
                onTap: (){
                  widget.onNext!();
                },
                child: Text(
                  "PRÓXIMO",
                  style: TextStyle(
                      fontSize: 14,
                      fontFamily: "OpenSans",
                      fontWeight: FontWeight.w600,
                      color: Theme.of(context).primaryColor
                  ),
                ),
              )
            ],
          )
              : GestureDetector(
                  onTap: (){
                    widget.onSkip!();
                  },
                  child: Text(
                    "FINALIZAR",
                    style: TextStyle(
                        fontSize: 14,
                        fontFamily: "OpenSans",
                        fontWeight: FontWeight.w600,
                        color: Theme.of(context).primaryColor
                    ),
                  ),
          )
        ],
      ),
    );
  }
}

我尝试将paddingFocus参数设置为负数，只接受小于-11的数字，但如果我将paddingFocus: -10，描述会稍微好一些，但仍然会溢出。我阅读了TutorialCoachMark的文档，但没有找到可以缩小空间的参数。我还尝试在CoachmarkDescription中使用Positioned但没有起作用。

我想要减小焦点（form）和描述之间的空间，消除溢出，并显示完整的容器，就像其他目标焦点一样。

英文:

I am using tutorial coach mark for a tour in my app, but I notice that depending on the size of content in the focus, the distance between focus and the TargetContent is bigger. This problem is causing an overflow that interferes with the use.

See the video and notice the difference of space when de content is bigger. If the space were small, the description (TargetContent) would not overflow: (i also show the small space when the button is on focus to see the difference of the spaces)

教程教练马克 – 目标内容溢出屏幕 - - - -
教程教练马克 – 目标内容溢出屏幕

the code:

showTour(){
initTargets();
tutorialCoachMark = TutorialCoachMark(
targets: targets,
hideSkip: true,
paddingFocus: 0
)..show(context: context, rootOverlay: true);
}
initTargets(){
targets = [
TargetFocus(
identify: &quot;qr-code-key&quot;,
keyTarget: barCodeKey,
contents: [
TargetContent(
align: ContentAlign.bottom,
builder: (context, controller) {
return CoachMarkDescription(
text: &quot;Ou utilize o leitor de c&#243;digo de barras. Basta clicar no &#237;cone e apontar a c&#226;mera para o equipamento.&quot;,
margin: EdgeInsets.only(left: 70, right: 10),
onNext: (){
// setState(() {
//   isTutorialFocusForm = true;
// });
controller.next();
},
onSkip: (){
controller.skip();
if(widget.isRevisitTour == true) {
_setFlagToShowRegistrationEquipmentTour(false);
Navigator.of(context).pop();
}
},
);
}),
]
),
TargetFocus(
identify: &quot;form-key&quot;,
keyTarget: formKey,
shape: ShapeLightFocus.RRect,
contents: [
TargetContent(
builder: (context, controller) {
return Positioned(
top: 20,
child: CoachMarkDescription(
text: &quot;Preencha todos os campos e insira o arquivo da sua nota fiscal.&quot;,
margin: EdgeInsets.only(left: 40, right: 40),
onNext: (){
controller.next();
},
onSkip: (){
controller.skip();
if(widget.isRevisitTour == true){
_setFlagToShowRegistrationEquipmentTour(false);
Navigator.of(context).pop();
}
},
),
);
}),
]
),
TargetFocus(
identify: &quot;register-button-key&quot;,
keyTarget: registerButtonKey,
shape: ShapeLightFocus.RRect,
contents: [
TargetContent(
align: ContentAlign.top,
builder: (context, controller) {
return CoachMarkDescription(
text: &quot;Clique em “cadastrar”, para prosseguir e seu equipamento ser&#225; listado.&quot;,
margin: EdgeInsets.only(left: 40, right: 40),
isFinish: true,
onSkip: (){
controller.skip();
if(widget.isRevisitTour == true){
_setFlagToShowRegistrationEquipmentTour(false);
Navigator.of(context).pop();
}
},
);
}),
]
),
];
}

CoachMarlDescription class code:

import &#39;package:flutter/cupertino.dart&#39;;
import &#39;package:flutter/material.dart&#39;;
class CoachMarkDescription extends StatefulWidget {
final String text;
final String skip;
final String next;
final bool? isFinish;
final EdgeInsets margin;
final Function? onSkip;
final Function? onNext;
const CoachMarkDescription({
Key? key,
required this.text,
this.skip = &quot;Pular&quot;,
this.next = &quot;Pr&#243;ximo&quot;,
this.onSkip,
this.onNext,
required this.margin,
this.isFinish
}) : super(key: key);
@override
State&lt;CoachMarkDescription&gt; createState() =&gt; _CoachMarkDescriptionState();
}
class _CoachMarkDescriptionState extends State&lt;CoachMarkDescription&gt; {
bool isFinish = false;
@override
Widget build(BuildContext context) {
if(widget.isFinish == true){
isFinish = true;
}
return Container(
// width: 256,
padding: EdgeInsets.only(top: 20, left: 20, right: 20, bottom: 20),
margin: widget.margin,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)
),
child: Column(
children: [
Text(
widget.text,
textAlign: isFinish ? TextAlign.center : TextAlign.left,
style: TextStyle(
fontSize: 14,
fontFamily: &quot;OpenSans&quot;,
color: Color.fromRGBO(51, 51, 51, 1)
),
),
SizedBox(height: 20),
!isFinish ?
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: (){
widget.onSkip!();
},
child: Text(
&quot;PULAR&quot;,
style: TextStyle(
fontSize: 14,
fontFamily: &quot;OpenSans&quot;,
color: Color.fromRGBO(51, 51, 51, 1)
),
),
),
GestureDetector(
onTap: (){
widget.onNext!();
},
child: Text(
&quot;PR&#211;XIMO&quot;,
style: TextStyle(
fontSize: 14,
fontFamily: &quot;OpenSans&quot;,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryColor
),
),
)
],
)
: GestureDetector(
onTap: (){
widget.onSkip!();
},
child: Text(
&quot;FINALIZAR&quot;,
style: TextStyle(
fontSize: 14,
fontFamily: &quot;OpenSans&quot;,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryColor
),
),
)
],
),
);
}
}

i tryed put a negative number in paddingfocus parameter, and only acepted numbers less than -11 but if i put paddingFocus: -10, the description got a little better but still with overflow. I read the documentation of TutorialCoachMark and I dont find some parameter that can shrink the space and I try wrap CoachmarkDescription in Position but nothing worked.

I want to decrease the space between focus (form) and description, removing the overflow and showing the full Container, just like the others Target Focus

答案1

得分: 0

我考虑调整父组件的大小、边距和填充，以使目标内容适合得当。此外，我更改了填充（TargetContent的参数），使其如下所示：

TargetFocus(
  identify: "form-key",
  keyTarget: formKey,
  shape: ShapeLightFocus.RRect,
  contents: [
    TargetContent(
      padding: EdgeInsets.zero,
      builder: (context, controller) {
        return CoachMarkDescription(
          text: "Preencha todos os campos e insira o arquivo da sua nota fiscal.",
          margin: EdgeInsets.only(left: 40, right: 40),
          onNext: () {
            controller.next();
          },
          onSkip: () {
            controller.skip();
            if (widget.isRevisitTour == true) {
              _setFlagToShowRegistrationEquipmentTour(false);
              Navigator.of(context).pop();
            }
          },
        );
      },
    ),
  ],
),
英文:

I considered adjusting the size of the parent component, margins, and padding to allow the target content to fit properly. Moreover, I change the padding (parameter of TargetContent), so it looks like this:

TargetFocus(
identify: &quot;form-key&quot;,
keyTarget: formKey,
shape: ShapeLightFocus.RRect,
contents: [
TargetContent(
padding: EdgeInsets.zero
builder: (context, controller) {
return CoachMarkDescription(
text: &quot;Preencha todos os campos e insira o arquivo da sua nota fiscal.&quot;,
margin: EdgeInsets.only(left: 40, right: 40),
onNext: (){
controller.next();
},
onSkip: (){
controller.skip();
if(widget.isRevisitTour == true){
_setFlagToShowRegistrationEquipmentTour(false);
Navigator.of(context).pop();
}
},
);
}),
]
),

huangapple
  • 本文由 发表于 2023年7月10日 22:18:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/76654658.html
  • dart
  • flutter
  • flutter-animation
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定