Sometimes there will be cases where the content is not fully displayed. .

[LebenNNA]

Sometimes there will be cases where the content is not fully displayed. .

[Dn-a]

@LebenNNA what content do you refer to, text or tag? please post your code here.

[LebenNNA]

These are my parameters

final List<String> _list = [
    '网易云',
    '拼多多',
    '美术',
    '互联网',
    '炫舞时代',
    '猫耳FM',
    '爱奇艺',
    '网易大神',
    '美容',
    '小红书',
    '同人文',
    '食物语',
    '篝火营地',
    '哔了狗了QP又不够了。。',
    '草丛三剑客',
    'Whose you daddy',
    'Black sheep wall',
    '上上下下左右左右ABBA',
  ];

  bool _symmetry = false;
  bool _singleItem = false;
  int _column = 10;
  double _fontSize = 14.0;

  Color _textColor = Color(0xff252c41);
  Color _selActiveColor = Color(0xfff75262);
  Color _allActiveColor = Color(0x80f75262);

  EdgeInsets _margin =
      const EdgeInsets.symmetric(horizontal: 10.0, vertical: 12.5);

  String _selectableOnPressed = '';

  List<Tag> _selectableTags = [];
  List<Tag> _selectedTags = [];

int index = 0;
    _list.forEach(
      (item) {
        _selectableTags.add(
          Tag(
            id: index,
            title: item,
            active: false,
          ),
        );
        index++;
      },
    );

SelectableTags(
      tags: _selectableTags,
      columns: _column,
      // textColor: _textColor,
      fontSize: _fontSize,
      symmetry: _symmetry,
      singleItem: _singleItem,
      activeColor: _allActiveColor,
      margin: _margin,
      boxShadow: [],
      onPressed: (tag) {
        setState(() {
          _selectableOnPressed = tag.toString();
          print('--------selectableOnPressed:$_selectableOnPressed--------');
          _selectableTags.remove(tag);
          _selectedTags.add(tag);
        });
      },
    );

This is the display effect

I use the SelectableTags..

I have another problem. When the title is short enough, I find that each tag has a minimum width, not calculated based on the byte length of the title. @Dn-a

[Dn-a]

@LebenNNA I will solve it in the next version (0.1.9).

[LebenNNA]

Ok, I am looking forward to it.

[LebenNNA]

I have another problem. When the title is short enough, I find that each tag has a minimum width, not calculated based on the byte length of the title.

And Can this problem be solved? @Dn-a

[Dn-a]

@LebenNNA install version 0.2.0, take a test and let me know

[LebenNNA]

These are my code

import 'package:flutter/material.dart';

import 'package:x5_shequ_main/widgets/select_topic/SelectableTag.dart';

class SelectTopicPage extends StatefulWidget {
  @override
  _SelectTopicPageState createState() => _SelectTopicPageState();
}

class _SelectTopicPageState extends State<SelectTopicPage>
    with SingleTickerProviderStateMixin {
  Animation<double> tween;
  AnimationController controller;
  static const int milliseconds = 2000;

  final List<String> _list = [
    '网易云',
    '拼多多',
    '美术',
    '互联网',
    '炫舞时代',
    '猫耳FM',
    '爱奇艺',
    '网易大神',
    '美容',
    '小红书',
    '同人文',
    '食物语',
    '篝火营地',
    '哔了狗了QP又不够了。。',
    '草丛三剑客',
    'Whose you daddy',
    'Black sheep wall',
    '上上下下左右左右ABBA',
  ];

  bool _symmetry = false;
  bool _singleItem = false;
  int _column = 10;
  double _fontSize = 14.0;

  Color _textColor = Color(0xff252c41);
  Color _selActiveColor = Color(0xfff75262);
  Color _allActiveColor = Color(0x80f75262);

  EdgeInsets _margin =
      const EdgeInsets.symmetric(horizontal: 10.0, vertical: 12.5);

  String _selectableOnPressed = '';

  List<Tag> _selectableTags = [];
  List<Tag> _selectedTags = [];

  @override
  void initState() {
    super.initState();

    //创建动画控制类对象
    controller = AnimationController(
        duration: const Duration(milliseconds: milliseconds), vsync: this);

    //创建补间对象
    tween = Tween(begin: 0.0, end: 1.0).animate(controller) // 返回Animation对象
      ..addListener(() {
        // 添加监听
        setState(() {
          print(tween.value); // 打印补间插值
        });
      });
    controller.forward(); // 执行动画

    int index = 0;
    _list.forEach(
      (item) {
        _selectableTags.add(
          Tag(
            id: index,
            title: item,
            active: false,
          ),
        );
        index++;
      },
    );
  }

  Widget _selectedTopicBuilder() {
    return SelectableTags(
      tags: _selectedTags,
      columns: _column,
      offset: 28,
      textColor: _textColor,
      fontSize: _fontSize,
      symmetry: _symmetry,
      singleItem: _singleItem,
      activeColor: _selActiveColor,
      margin: _margin,
      boxShadow: [],
      onPressed: (tag) {
        _selectableOnPressed = tag.toString();
        print('--------selectableOnPressed:$_selectableOnPressed--------');
        setState(() {
          _selectedTags.remove(tag);
          _selectableTags.add(tag);
          Tag.selectSort(_selectableTags);
        });
      },
    );
  }

  Widget _allTopicBuilder() {
    return SelectableTags(
      tags: _selectableTags,
      columns: _column,
      offset: 28,
      // textColor: _textColor,
      fontSize: _fontSize,
      symmetry: _symmetry,
      singleItem: _singleItem,
      activeColor: _allActiveColor,
      margin: _margin,
      boxShadow: [],
      onPressed: (tag) {
        setState(() {
          _selectableOnPressed = tag.toString();
          print('--------selectableOnPressed:$_selectableOnPressed--------');
          _selectableTags.remove(tag);
          _selectedTags.add(tag);
        });
      },
    );
  }

  Widget _selectTopicBuilder() {
    return ListView(
      children: <Widget>[
        Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 42.5),
            ),
            // 已选部分
            Container(
              color: Colors.white,
              child: _selectedTags.length == 0
                  ? Text(
                      '关注一些感兴趣的话题',
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.bold,
                      ),
                      textAlign: TextAlign.center,
                    )
                  : _selectedTopicBuilder(),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 30.0),
            ),
            // 未选部分
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 15.0),

[LebenNNA]

Sometimes there will be cases where the content is not fully displayed. . @Dn-a This is zhe cut image of iphone8plus emulator

[LebenNNA]

How can I set the tag to set its own length based on the length of the title?

[LebenNNA]

@Dn-a

[LebenNNA]

I guess the result is caused by the outlinebutton

[Dn-a]

@LebenNNA it's a problem I've encountered since the beginning, but I think I've found the solution... Wait for the next version

[Dn-a]

@LebenNNA
important update in the version 0.2.1 try it and let me know

[LebenNNA]

I still have a question, how to set the control fixed height vertically scrollable, or set only one line, then you can scroll horizontally @Dn-a

[monxarat]

In the ListView you can set scrollDirection: Axis.horizontal or scrollDirection: Axis.vertical

example:

                return ListView.separated(
                    scrollDirection: Axis.horizontal,
                    separatorBuilder: (context, index) => Divider(height: 50),
                    itemCount: snapshot.data.length,
                    itemBuilder: (BuildContext context, int index) {
                      ....
                      return <create List item>
                    });

[Dn-a]

@LebenNNA can i close the problem?

[LebenNNA]

ok, thank you