Question

基本上我想实现类似以下的内容，

移动设备的右上角有一个菜单按钮。如果用户单击该按钮，则水平栏（例如android移动设备中的google搜索栏）会在左侧打开，其中包含水平可滚动图标的列表。

Flutter中是否已经存在任何现有的小部件？请让我知道如何开发此功能

Answer 1

您可以使用listview水平显示图标

ListView(scrollDirection:Axis.horizontal,
children:[.. Icon(Icons.home).... ])

Answer 2

以下是我想实现的目标的一个示例：

bool showHorizontalBar = false;

Widget buildBarItem(IconData icon) {
  return Container(
    width: 100.0,
    margin: EdgeInsets.all(4.0),
    color: Colors.white,
    child: Icon(icon),
  );
}

Widget buildBar() {
  return SizedBox(
    height: 50.0,
    child: ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        buildBarItem(Icons.directions_car),
        buildBarItem(Icons.directions_bike),
        buildBarItem(Icons.directions_bus),
        buildBarItem(Icons.directions_run),
        buildBarItem(Icons.directions_railway),
      ],
    ),
  );
}

Widget buildMenuIcon() {
  return IconButton(
    icon: Icon(showHorizontalBar ? Icons.close : Icons.menu),
    onPressed: () {
      setState(() {
        showHorizontalBar = !showHorizontalBar;
      });
    },
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Stack(
        children: <Widget>[
          showHorizontalBar ? buildBar() : SizedBox.shrink(),
          Align(
            alignment: Alignment.topRight,
            child: buildMenuIcon(),
          )
        ],
      ),
    ),
  );
}

如何使用Flutter实现水平图标列表菜单

2 个答案: