小编Piy*_*ssi的帖子

如何在Flutter中渲染特定行数的Wrap?

我正在尝试为颤动中的列表创建一个过滤器。我希望在列表上方显示一些过滤器。像这样的东西 -

来自 Figma 的 UI
(来源:imge.to

我无法弄清楚如何仅渲染这些过滤器的 2 行,然后使用“+X”渲染芯片,让用户知道还应用了多少个过滤器。所以我被这样的事情困住了 -

颤振截图
(来源:imge.to

我如何生成这个“过滤器浏览”小部件的代码 -

class FilterGlance extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.fromLTRB(10.0, 10.0, 5, 0),
          child: Text("FILTER",
              style: TextStyle(
                  color: Colors.white30, fontWeight: FontWeight.bold)),
        ),
        Container(
          child: Wrap(
            crossAxisAlignment: WrapCrossAlignment.center,
            verticalDirection: VerticalDirection.down,
            runSpacing: 3.0,
            spacing: 3.0,
            children: <Widget>[
              ChipDesign("Lifetime"),
              ChipDesign("Student"),
              ChipDesign("Salaried"),
              ChipDesign("Corporate"),
              ChipDesign("Open"),
              ChipDesign("My Referral Code Users"),
              ChipDesign("+10"),
            ],
          ),
        ),
      ],
    );
  }
}

class ChipDesign extends …
Run Code Online (Sandbox Code Playgroud)

dart flutter flutter-layout

10
推荐指数
1
解决办法
4781
查看次数

如何在 Flutter 中的 SliverAppBar 中的 flexibleSpace 中移动动作和标题?

我正在尝试在 Flutter 中实现类似的东西。

https://a.imge.to/2019/08/22/mgrjU.png

但我现在被困在这个问题上。

https://a.imge.to/2019/08/22/mgB62.png

操作按钮固定在 UI 的顶部,不随文本移动。有什么办法可以把他们打倒在裂片妖吗?

我一直无法找到向 SliverAppBar 的 flexibleSpace 部分添加操作的方法


SliverAppBar(
      floating: false,
      pinned: true,
      expandedHeight: 150.0,
      backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      flexibleSpace: const FlexibleSpaceBar(
        title: Text("User Status", textAlign: TextAlign.justify,),
        titlePadding: EdgeInsets.all(15.0),
      ),
      actions: [
        IconButton(
          icon: Icon(Icons.refresh),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.search),
          onPressed: () {},
        )
      ],
    );
Run Code Online (Sandbox Code Playgroud)

我希望操作按钮带有标题文本。当用户滚动时,按钮应该随着标题文本移动。

dart flutter flutter-layout

6
推荐指数
1
解决办法
3719
查看次数

如何在 Flutter 中的 Google Maps 顶部制作浮动搜索栏?

我正在尝试在我的地图顶部制作一个浮动搜索栏,就像谷歌地图应用程序中的搜索栏一样。像这样的东西——

正式版

我似乎无法让它漂浮。搜索栏不会覆盖在地图上。它只是在自己的框中呈现。

我的版本



    void main() {
      runApp(MaterialApp(
        title: 'Navigation Basics',
        theme: ThemeData.dark(),
        home: MyAppState(),
      ));
    }

    class MyAppState extends StatelessWidget {
      final LatLng _center = const LatLng(28.535517, 77.391029);

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: FloatAppBar(),
            body: Map(_center),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Report()),
                );
              },
              child: Icon(Icons.add, semanticLabel: 'Action'),
              backgroundColor: Colors.black87,
            ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
            bottomNavigationBar: BottomNavBar(),
          ),
        );
      }
    }


    class FloatAppBar extends StatelessWidget with PreferredSizeWidget {
      @override
      Widget build(BuildContext context) { …
Run Code Online (Sandbox Code Playgroud)

google-maps flutter flutter-layout

4
推荐指数
1
解决办法
8416
查看次数

标签 统计

flutter ×3

flutter-layout ×3

dart ×2

google-maps ×1