如何在应用栏下定位项目？

Question

我想在此设计类型中定位圆圈：

我的想法是创建两个圆圈并将它们放置在屏幕右上角的appBar 下方。作为解决方案的是 Positioned 小部件。当我想放置 top、left、bottom 和 right 等任何位置属性时，结果出现此错误：


════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was
Stack
When the exception was thrown, this was the stack
#2      RenderStack._computeSize
#3      RenderStack.performLayout
#4      RenderObject.layout
#5      ChildLayoutHelper.layoutChild
#6      RenderFlex._computeSizes
#7      RenderFlex.performLayout
#8      RenderObject.layout
#9      MultiChildLayoutDelegate.layoutChild
#10     _ScaffoldLayout.performLayout
#11     MultiChildLayoutDelegate._callPerformLayout
#12     RenderCustomMultiChildLayoutBox.performLayout
#13     RenderObject.layout
#14     RenderProxyBoxMixin.performLayout
#15     RenderObject.layout
#16     RenderProxyBoxMixin.performLayout
#17     _RenderCustomClip.performLayout
#18     RenderObject.layout
#19     RenderProxyBoxMixin.performLayout
#20     RenderObject.layout
#21     RenderProxyBoxMixin.performLayout
#22     RenderObject.layout
#23     RenderProxyBoxMixin.performLayout
#24     RenderObject.layout
#25     ChildLayoutHelper.layoutChild
#26     RenderStack._computeSize
#27     RenderStack.performLayout
#28     RenderObject.layout
#29     RenderProxyBoxMixin.performLayout
#30     RenderObject.layout
#31     RenderProxyBoxMixin.performLayout
#32     RenderObject.layout
#33     RenderProxyBoxMixin.performLayout
#34     RenderObject.layout
#35     RenderProxyBoxMixin.performLayout
#36     RenderObject.layout
#37     RenderProxyBoxMixin.performLayout
#38     RenderObject.layout
#39     RenderProxyBoxMixin.performLayout
#40     RenderObject.layout
#41     RenderProxyBoxMixin.performLayout
#42     RenderOffstage.performLayout
#43     RenderObject.layout
#44     RenderProxyBoxMixin.performLayout
#45     RenderObject.layout
#46     _RenderTheatre.performLayout
#47     RenderObject.layout
#48     RenderProxyBoxMixin.performLayout
#49     RenderObject.layout
#50     RenderProxyBoxMixin.performLayout
#51     RenderObject.layout
#52     RenderProxyBoxMixin.performLayout
#53     RenderObject.layout
#54     RenderProxyBoxMixin.performLayout
#55     RenderObject.layout
#56     RenderProxyBoxMixin.performLayout
#57     RenderObject.layout
#58     RenderProxyBoxMixin.performLayout
#59     RenderObject.layout
#60     RenderProxyBoxMixin.performLayout
#61     RenderObject.layout
#62     RenderView.performLayout
#63     RenderObject._layoutWithoutResize
#64     PipelineOwner.flushLayout
#65     RendererBinding.drawFrame
#66     WidgetsBinding.drawFrame
#67     RendererBinding._handlePersistentFrameCallback
#68     SchedulerBinding._invokeFrameCallback
#69     SchedulerBinding.handleDrawFrame
#70     SchedulerBinding.scheduleWarmUpFrame.<anonymous closure>
(elided 6 frames from class _AssertionError, class _RawReceivePortImpl, class _Timer, and dart:async-patch)
The following RenderObject was being processed when the exception was fired: RenderStack#9f989 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderStack#9f989 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: offset=Offset(362.0, 0.0); flex=null; fit=null (can use size)
    constraints: BoxConstraints(0.0<=w<=768.0, 0.0<=h<=Infinity)
    size: Size(44.0, 17.0)
    alignment: AlignmentDirectional.topStart
    textDirection: ltr
    fit: loose
    child 1: RenderParagraph#bfe70 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: top=1.0; offset=Offset(0.0, 0.0) (can use size)
        constraints: BoxConstraints(0.0<=w<=768.0, 0.0<=h<=Infinity)
        size: Size(44.0, 17.0)
        textAlign: start
        textDirection: ltr
        softWrap: wrapping at box width
        overflow: clip
        locale: en_US
        maxLines: unlimited
        text: TextSpan
            debugLabel: (englishLike bodyMedium 2014).merge(blackCupertino bodyMedium)
            inherit: false
            color: Color(0xdd000000)
            family: .SF UI Text
            size: 14.0
            weight: 400
            baseline: alphabetic
            decoration: TextDecoration.none
            "Cicle 1"
════════════════════════════════════════════════════════════════════════════════
Reloaded 1 of 585 libraries in 479ms.

屏幕结构：

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        shape: const Border(
            bottom: BorderSide(color: Color(0XFFA9A9AD), width: 0.5)),
        automaticallyImplyLeading: false,
        shadowColor: Colors.transparent,
        backgroundColor: const Color(0XFFF4F4F5),
        title: const Text('Login',
            style: TextStyle(color: Colors.black, fontSize: 18)),
      ),
      body: Column(
        children: [
          Stack(
            children: [Positioned(top: 1, child: Text('Cicle 1'))], // here makes error
          ),
        ]
      )

Answer 1

要使用 Stack 小部件，您需要像 SizedBox 一样包裹它 sized-widget，用 Column 包裹它会得到无限高度。

您可以直接在body

上使用Stack

body: Stack(
  children: [
    Positioned(
      top: 1,
      child: Text('Cicle 1'),
    )
  ], 
),

或用SizedBox包裹并提供高度。

如何在应用栏下定位项目？

How to position items under appbar?

flutter

dart

flutter-layout