颤振按钮过滤器答案

【问题标题】：Flutter button filters颤振按钮过滤器
【发布时间】：2020-04-23 22:24:06
【问题描述】：

我正在尝试找出实现类似于附件的最佳方法

目前，我已经完成了如下操作，我想知道是否有更清洁或更好的方式使用按钮等。

class GetFilters extends StatelessWidget {
  GetFilters();

  @override
  Widget build(BuildContext context) {
    return ListView(
      // This next line does the trick.
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(Icons.call),
              Text('Afterpay'),
            ],
          )
          ]
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Icon(Icons.call),
                Text('Afterpay'),
              ],
            )
          ]
        )
    ]
    );
  }
}

【问题讨论】：

请添加您想要达到的目标的解释。您的标题和描述不明确，图片也不是不言自明的。
不确定我能做到多清楚。我想看看我所做的是否能产生基本相同的效果是最好的方法
您的问题的标题是“颤振按钮过滤器”，但根据您所说的，您只是希望有人帮助构建屏幕截图上看到的布局？您的问题和目标不明确。
你需要LisView 而不是Row
@pskink 第一部分是一个列表视图，其中包含行

标签： button flutter text filter icons

【解决方案1】：

对于水平滚动，每个部分需要两个不同的 ListView

class GetFilters extends StatelessWidget {
  GetFilters();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Payment options'),
        ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(Icons.call),
              Text('Afterpay'),
            ],
          ),
           //More items
          ] 
        ),
       Text('Categories'),
       ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Icon(Icons.call),
                Text('Afterpay'),
              ],
            ),
            //More items
          ]
        )
    ]
    );
  }
}

对于按钮，我会用 GestureDetector 包装每个项目，例如：

GestureDetector(
        onTap: () => {},
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(12),
              decoration: new BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
              child: Icon(Icons.call),
            ),
            Text('Afterpay'),
          ],
        ),
      ),

您可以使用 InkWell 代替 GestureDetector，以防您希望在点击项目时获得材料视觉反馈

我还建议您在小部件类名称中使用主题而不是操作。 GetFilters 可以称为 Filters、FiltersSection

【讨论】：