Question

我有一个列表，我想为每个项目添加一个项目符号（我使用new Column因为我不想实现滚动）。我如何创建项目符号列表？

我想的可能是一个图标，但可能有一种方法可以使用文本样式中的装饰类。

Answer 1

要使其尽可能简单，可以使用UTF代码。这将成为子弹

_keyboardIsOn

Answer 2

我使用了ascii字符E.G。

...your widget hierarchy Text(String.fromCharCode(0x2022)), ...

Answer 3

您可以仅添加一个图标。

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new ListTile(
          leading: Icon(Icons.fiber_manual_record),
          title: new Text('My first line'),
        ),
        new ListTile(
          leading: Icon(Icons.fiber_manual_record),
          title: new Text('My second line'),
        )
      ],
    );
  }
}

Answer 4

以下小部件将创建一个填充的圆形，因此您可以为列中的每个项目调用此小部件。

class MyBullet extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
  decoration: new BoxDecoration(
    color: Colors.black,
    shape: BoxShape.circle,
  ),
  );
  }
}

希望这就是你想要的！

编辑：

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new ListTile(
          leading: new MyBullet(),
          title: new Text('My first line'),
        ),
        new ListTile(
          leading: new MyBullet(),
          title: new Text('My second line'),
        )
      ],
    );
  }
}
class MyBullet extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
    height: 20.0,
    width: 20.0,
    decoration: new BoxDecoration(
    color: Colors.black,
    shape: BoxShape.circle,
  ),
  );
  }
}

Answer 5

我可能无法回答这个问题，但是对于正在寻找如何在文本中使用项目符号的人来说可能有所帮助。可以使用RichText完成。

            RichText(
                text: TextSpan(
                  text: '• ',
                  style: TextStyle(color: Colors.lightBlue, fontSize: 18),
                  children: <TextSpan>[
                    TextSpan(text: 'Software Developer',style: 
                  GoogleFonts.ptSansNarrow(textStyle: TextStyle(fontSize: 18))),
                  ],
                ),
              )

因此，在这种情况下，子弹的颜色也可以根据需要更改！

Answer 6

我是从Tushar Pol得到这个想法的。如果要在项目符号上显示数字，则可以参考我的代码。

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class AppBullet extends StatelessWidget {
  AppBullet({
    @required this.width,
    @required this.height,
    this.order,
  })  : assert(width != null),
        assert(height != null);

  final double width;
  final double height;
  final int order;

  @override
  Widget build(BuildContext context) {
    return order == null
        ? _buildBullet(context)
        : _buildBulletWithOrder(context);
  }

  Widget _buildBullet(BuildContext context) {
    return new Container(
      height: height,
      width: width,
      decoration: new BoxDecoration(
        color: Colors.black,
        shape: BoxShape.circle,
      ),
    );
  }

  Widget _buildBulletWithOrder(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        _buildBullet(context),
        Text(
          '$order',
          style: GoogleFonts.lato(fontSize: 12.0, color: Colors.white),
        ),
      ],
    );
  }
}

Answer 7

您可以使用如下所示的CircleAvatar

ListTile(
              leading: CircleAvatar(
                radius: 6.0,
                backgroundColor: Colors.black,
              ),
              title : Text("Timestamp: C0238 - Wheel Speed Mismatch")
          ),

Answer 8

Entypo.dot_single 来自 Flutter vector Icons 图书馆

import 'package:flutter/material.dart';
import 'package:flutter_vector_icons/flutter_vector_icons.dart';

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        MyListItem(title: 'First Item'),
        MyListItem(title: 'Second Item'),
      ],
    );
  }
}

class MyListItem extends StatelessWidget {
  final String title;

  MyListItem({this.title});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(Entypo.dot_single),
        Text(title),
      ],
    );
  }
}

Screenshot

Answer 9

可能这并不能回答这个问题。我认为，这个答案可能对其他开发者有所帮助。

我用这个代码画了一个纯色的圆圈：

CircleAvatar(
  radius: 5.0,
  backgroundColor: Colors.black,
)

要在顶部添加额外的填充，我使用 Container:

Container(
  padding: EdgeInsets.only(top: 3),
  child: CircleAvatar(
    radius: 5.0,
    backgroundColor: Colors.black,
  )
)

您也可以在 backgroundColor 中使用其他 CircleAvatar。

感谢：@NBM

Answer 10

简单答案

如果您只查找符号，请使用 Text('\u2022 Bullet Text')

详细解答

我为字符串项目符号列表创建了一个自定义小部件。我正在分享代码，以便任何人都会发现它有帮助。

输出：

BulletList 小部件的代码

（您可以将其粘贴到一个单独的文件中，例如“bullet_widget.dart”，然后导入到您的屏幕中。）

import 'package:flutter/material.dart';

class BulletList extends StatelessWidget {
  final List<String> strings;

  BulletList(this.strings);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.fromLTRB(16, 15, 16, 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: strings.map((str) {
          return Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '\u2022',
                style: TextStyle(
                  fontSize: 16,
                  height: 1.55,
                ),
              ),
              SizedBox(
                width: 5,
              ),
              Expanded(
                child: Container(
                  child: Text(
                    str,
                    textAlign: TextAlign.left,
                    softWrap: true,
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.black.withOpacity(0.6),
                      height: 1.55,
                    ),
                  ),
                ),
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}

这将获取字符串列表和带有项目符号的输出。喜欢这个例子。

         Container(
            height: 327,
            decoration: BoxDecoration(
                color: Constants.agreementBG,
                borderRadius: BorderRadius.circular(14)),
            child: SingleChildScrollView(
              
              child: BulletList([
                 'Text 1',
                 'Text 2', 
                 'Text 3',
              ]),
            ),
          ),

Answer 11

这里有项目符号文本类

import 'package:flutter/cupertino.dart';

class BulletText extends StatelessWidget {
    late String txt;
    BulletText(String t){
        txt = t;
    }

    Widget build(BuildContext context) {
        return Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
                Text('\u2022'),
                SizedBox(width: 5),
                Expanded(
                  child: Text(txt)
                )
            ],
        );
    }
}

如何在flutter中添加项目符号或创建项目符号列表

11 个答案: