listview - 如何在 flutter 中实现如下设计?

标签 listview flutter dart flutter-layout

我需要实现类似 this 的设计.我已经尝试过 Grid 和 ListViews,但我无法实现这种设计。主要目标是在给定设计中显示字符串列表。

最佳答案

试试这个模板代码

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        debugShowCheckedModeBanner: false,
        darkTheme: ThemeData.dark(),
        title: 'Widget of the weeks',
        home: Scaffold(
            body: SafeArea(
            child: 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(
                    constraints: BoxConstraints(minHeight: 100, maxHeight: 100),
                    child: SingleChildScrollView(
                    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("Open1"),
                        ChipDesign("Open2"),
                        ChipDesign("Open2"),
                        ChipDesign("Open4"),
                        ChipDesign("Open5"),
                        ChipDesign("Open6"),
                        ChipDesign("Open7"),
                        ChipDesign("Open9"),
                        ChipDesign("Open10"),
                        ChipDesign("Open11"),
                        ChipDesign("Open12"),
                        ChipDesign("My Referral Code Users"),
                        ChipDesign("+10"),
                        ],
                    ),
                    ),
                ),
                ],
            ),

        ),
        ),
        );
    }
    }

    class ChipDesign extends StatelessWidget{
    final String _label;

    ChipDesign(this._label);

    @override
    Widget build(BuildContext context){
        return Container(
        child: Chip(
            label: Text(
            _label,
            style: TextStyle(color: Colors.white),
            ),
            backgroundColor: Colors.red,
            padding: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 0.0),
        ),
        margin: EdgeInsets.only(left: 10, right: 3, top: 0, bottom: 0),
        );
    }
    }

enter image description here

关于listview - 如何在 flutter 中实现如下设计?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57688266/

相关文章:

java - 如何将 javafx TableView 大小限制为必要的大小?

Android:ListView,最后一项 - 显示更多

flutter - 为什么我的 PopupMenuItem 上会出现 "Looking up a deactivated widget' 的祖先不安全”?

dart - 在本地获取并存储 json

dart - 由于 shadow dom,带有 bootstrap.js 的 angular.dart 组件失败

flutter - Visual Studio代码-Flutter:禁用自动中断

c# - 只写入 listView 中的一列?

android - 使用 PullToRefreshLayout 时显示 Listview 标题

asynchronous - flutter 和 bloc 异步yield

android - 安装location 2.3.5包时Flutter编译报错