如何在Flutter中编写此标签栏？

编程问答 2022-08-16

问题描述

我对SwiftUI有一定的经验，我前段时间编写了这段代码。我目前正在学习如何使用Flutter构建UI。我将如何编码呢？这是一个浮动的标签栏，可以通过滑动它来打开和关闭。

这基本上是一个带有5个按钮的圆角矩形HStack，如果滑动或长按它可以将其动画化为单个按钮。几天前，我才刚刚开始使用Flutter，但我仍在努力地将SwiftUI逻辑转换为Flutter。有什么想法吗？

{
  "seq": 1597590187271,"timestamp": 1597593891957,"flightSettings": {
    "Name": "ConnectorFrontEndSettings","AriaSDKToken": "d127f72a3abd41c9b9dd94faca947689-d58285e6-3a68-4cab-a458-37b9d9761d35-7033","SPAEnabled": true,"ClassificationFilterEnabled": true,"ClientRoutingEnabled": true,"EnableYammerGroupOption": true,"EnableFadeMessage": false,"EnableDomainBasedOwaConnectorList": false,"EnableDomainBasedTeamsConnectorList": false,"DevPortalSPAEnabled": true,"ShowHomeNavigationButtonOnConfigurationPage": false,"disableConnectToO365InlineDeleteFeedbackPage": true
  },"status": 500,"clientType": "SkypeSpaces","connectorType": "f39fe17c-6452-4879-b692-a93d73684348","name": "handleMessageError"
}

Open

打开

Closed

关闭

解决方法

我还是Flutter的新手，但总的来说，我会 创建一个有状态的小部件来存储按钮栏的状态。然后，将按钮栏创建为无状态小部件（使用Container（child：Row（children ...）

在有状态窗口小部件中，您可以使用启用滑动的功能包装无状态窗口小部件的调用（到目前为止尚未使用过）。在那里，您将看到类似setState（（）{expanded =！expanded}）的内容，并且可能会使用类似

的名称来调用无状态小部件 
Container(
  child: (expanded ? ShowBar() : Container()),)

在其中显示无状态窗口小部件类ShowBar或空容器

flutter-animationflutter-layoutswiftswiftswiftswiftui