TextOverFlow Flutter - PullRequest
       7

TextOverFlow Flutter

0 голосов
/ 30 апреля 2020

У меня есть определенный текстовый виджет, когда он переполняется, у меня есть 3 варианта. Либо исчезают, видны, многоточие или клип. Но я не хочу выбирать между ними. Я хочу, если текст переполнен, тогда не показывать текст.

Редактировать: Я работаю над клоном кода для этого дизайна

Предполагая, что textStyle unknown . Как мне этого добиться?

Код:

class SwipeNavigationBar extends StatefulWidget {
  final Widget child;
  SwipeNavigationBar({this.child});
  @override
  _SwipeNavigationBarState createState() => _SwipeNavigationBarState();
}

class _SwipeNavigationBarState extends State<SwipeNavigationBar> {
  @override
  Widget build(BuildContext context) {
    return Consumer<Controller>(
      builder: (_, _bloc, __) {
        return SafeArea(
          child: AnimatedContainer(
            duration: Duration(seconds: 01),
            color: Colors.white,
            curve: Curves.easeIn,
            height: !_bloc.x ? 50 : 200,
            child: Row(
              children: [
                Column(
                  verticalDirection: VerticalDirection.up,
                  children: [
                    Expanded(child: Icon(Icons.dashboard)),
                    Expanded(
                      child: RotatedBox(
                        quarterTurns: -45,
                        child: Text(
                          'data', 
                          softWrap: false,  
                          style: TextStyle(
                            textBaseline: TextBaseline.alphabetic
                          ),
                        ),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        );
      },
    );
  }
}

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

Чтобы имитировать c дизайн, который вы, возможно, захотите изучить, используя виджет Stack. Однако, чтобы ответить на ваш вопрос, вы бы хотели установить softWrap на false.

Align(
  alignment: Alignment.topLeft,
  child: SizedBox(
    width: 100,
    child: Text(
      'Some text we want to overflow',
      softWrap: false,
    ),
  ),
)

softWrap - это действительно ключ. Хотя я добавил виджеты Align и SizedBox, чтобы разрешить их использование в любом месте, независимо от того, какой родительский виджет вы используете (поскольку некоторые виджеты устанавливают жесткие ограничения для своих детей и переопределяют предпочтения размера их детей).

Пример CodePen

Редактировать: 5/6/2020

С выпуском Flutter v1.17 у вас теперь есть доступ к новый Widget под названием NavigationRail , который может помочь вам с дизайном, который вы ищете.

Navigation Rail Example

0 голосов
/ 30 апреля 2020

Используйте троичный оператор, чтобы проверить длину текста, который вы передаете в виджет Текст, и на основе этого передать сам текст или пустую строку.

String yourText;
int desiredLengthToShow = 10; //Change this according to you.
...
Text(
  child: yourText.length > desiredLengthToShow ? "" : yourText,
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...