如何在颤振中实现如下设计？答案

【问题标题】：How to achieve a design like below in flutter?如何在颤振中实现如下设计？
【发布时间】：2020-01-01 10:29:24
【问题描述】：

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

【问题讨论】：

标签： listview flutter dart flutter-layout

【解决方案1】：

您可以使用 Wrap Widget，它将一个 Widget 列表作为它的子项，在这种情况下，它将是一个内部带有文本的容器。所有不适合该行的小部件都将移至下一行。您也可以设置垂直和水平间距。

class GridWidget extends StatefulWidget {
  @override
  _GridWidgetState createState() => _GridWidgetState();
}

class _GridWidgetState extends State<GridWidget> {
  List<String> text = ['Android', 'IOS', 'Flutter', 'IOT', 'Text', 'Text', 'Text'];
  List<Widget> widgets;
  @override
  void initState() {
    widgets = List.generate(text.length, (index)=>Container(
      width: (text[index].length * 16).toDouble(),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(15)),
        border: Border.all(
          color: Colors.black54,
          width: 2,
        )
      ),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Text(text[index], textAlign: TextAlign.center,),
          ),
        ),
      ),
    ), growable: false);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Wrap(
        runSpacing: 10,
        spacing: 10,
        direction: Axis.horizontal,
        children: widgets,
      ),
    );
  }
}

虽然在这种情况下我硬编码了容器宽度。在大多数情况下，它应该只是包裹在填充物上。那里需要一些思考，但我希望你明白，尝试运行它。

【讨论】：

【解决方案2】：

试试这个模板代码

    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),
        );
    }
    }

【讨论】：

谢谢，这正是我所需要的。