Question

我正在快速开发此UI（第1张附图）。从数据库中获取芯片并动态创建其列表。在UI上渲染它们时，出现溢出错误（第二张图片）。如果没有可用空间，我希望芯片移至下一行。以下是我的代码：

Container(
          padding: EdgeInsets.only(left: 5.0, right: 5.00),
          child: Card(
            elevation: 4,
            child: Column(
              children: <Widget>[
                Container(
                      padding: EdgeInsets.only(
                          top: 10.0, bottom: 10.00, left: 10.0, right: 10.00),
                      child: Column(children: <Widget>[
                        Row(
                          mainAxisSize: MainAxisSize.max,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                new Container(
                                  child: Text('Every Month',
                                      style: TextStyle(
                                          fontSize: 14,
                                          color: Color(0xFF0d1b41),
                                          fontFamily: 'Poppins',
                                          fontWeight: FontWeight.bold)),
                                ),
                                new Container(
                                  child: Text('Every 28th of month',
                                      style: TextStyle(
                                          fontSize: 12,
                                          color: Color(0xFFb1b1b1),
                                          fontFamily: 'Poppins',
                                          fontWeight: FontWeight.bold)),
                                ),
                              ],
                            ),
                            Column(
                              children: <Widget>[
                                new Container(
                                  padding: EdgeInsets.only(
                                    bottom: 20.0,
                                  ),
                                  child: Text('Scheduled',
                                      textAlign: TextAlign.right,
                                      style: TextStyle(
                                        fontSize: 12,
                                        color: Color(0xFFfbb450),
                                        fontFamily: 'Poppins',
                                        fontStyle: FontStyle.italic,
                                      )),
                                ),
                              ],
                            ),
                          ],
                        ),
                        SizedBox(height: 10),
                        Divider(
                          color: Colors.grey[500],
                          thickness: 1.0,
                        ),
                        Row(children: <Widget>[
                          Column(
                            children: <Widget>[
                              new Container(
                                width: 60,
                                height: 70,
                                padding: EdgeInsets.only(
                                    top: 10.0,
                                    bottom: 40.00,
                                    left: 10.0,
                                    right: 8.00),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  image: DecorationImage(
                                    image: new NetworkImage(
                                        'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80'),
                                    fit: BoxFit.fill,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          Column(
                              children: <Widget>[
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: <Widget>[
                                    Container(
                                      width: 220,
                                      child: new Text(
                                        "Coca Cola Zero",
                                        style: new TextStyle(
                                            fontSize: 18.0,
                                            color: Color(0xff8c8c8c),
                                            fontWeight: FontWeight.bold,
                                            fontFamily: 'Poppins'),
                                        textAlign: TextAlign.left,
                                      ),
                                    )
                                  ],
                                ),
                                SizedBox(height: 10.0),
                                generateTags(tagList),
                                SizedBox(height: 10.0),
                              ]),
                        ]),
                      ])),
              ],
            ),
          ));

 static Widget generateTags(List<String> productTagList) {
    tagList = productTagList;
    return Wrap(
      children: tagWidgets.toList(),
    );
  }

请指导我创建此用户界面

Answer 1

请使用包装芯片包装小部件。

class MultiSelectChip extends StatefulWidget {
final List<String> reportList;
final Function(List<String>) onSelectionChanged; // +added
MultiSelectChip(
this.reportList,
{this.onSelectionChanged} // +added
);
 @override
 _MultiSelectChipState createState() => _MultiSelectChipState();
}
 class _MultiSelectChipState extends State<MultiSelectChip> {
// String selectedChoice = "";
  List<String> selectedChoices = List();
  _buildChoiceList() {
List<Widget> choices = List();
widget.reportList.forEach((item) {
  choices.add(Container(
    padding: const EdgeInsets.all(2.0),
    child: ChoiceChip(
      label: Text(item),
      selected: selectedChoices.contains(item),
      onSelected: (selected) {
        setState(() {
          selectedChoices.contains(item)
              ? selectedChoices.remove(item)
              : selectedChoices.add(item);
          widget.onSelectionChanged(selectedChoices); // +added
        });
      },
    ),
  ));
   });
  return choices;
}
  @override
    Widget build(BuildContext context) {
  return Wrap(
  children: _buildChoiceList(),
);
 }
 }

Answer 2

不完全...但是您可以修改...

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var list1 = ["abc", "sdf", "ags", "qwe","eded","ecc","fef","g4g","wev"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Row(
              children: <Widget>[imgWidget(), content()],
            ),
          ],
        ));
  }

  imgWidget() {
    return Container(
      height: 40.0,
      width: 40.0,
      color: Colors.amber,
    );
  }

  content() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[_title(), _chips(), _actionBtns()],
    );
  }

  _title() {
    return Text("CocaCola Zero");
  }

  _chips() {
    return Container(
      width: MediaQuery.of(context).size.width-50,
      child: Wrap(
      children: list1.map((String e) => Chip(label: Text(e))).toList(),
          ),
    );
  }

  _actionBtns() {
    return Row(
      children: <Widget>[
        _customBTN(icon: Icons.edit, btnName: "Edit", onTap: () {}),
        _customBTN(icon: Icons.delete, btnName: "Delete", onTap: () {})
      ],
    );
  }

  _customBTN({Function onTap, String btnName, IconData icon}) {
    return MaterialButton(
        child: Row(
          children: <Widget>[
            Icon(icon),
            Text(btnName),
          ],
        ),
        onPressed: onTap);
  }
}

颤振中的动态芯片上出现溢出错误

2 个答案: