Chcę skrócić mój tekst, jeśli nie pasuje do obszaru.

Na przykład: Wpisz opis obrazu tutaj

Oryginalny tekst jest Downtown Manhattan Tour

Skróć tekst powinien być: Downtown ...

A gdy użytkownik kliknie tekst,

Chcę pokazać pełny tekst w małym wyskakującym wyskakującym, który zniknie po 1 sekundzie lub kliknij gdzieś indziej.

To jest mój powiązany kod:

Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
      height: MediaQuery.of(context).size.height / 12,
      width: MediaQuery.of(context).size.width,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            // we can show related user profile picture in this area,  whe we click it we go to the related user page.
            padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(userAction.owner.picture),
                ),
                SizedBox(
                  width: 5,
                ),
                Text(userAction.owner.firstName +
                    ' ' +
                    userAction.owner.lastName)
              ],
            ),
          ),
          Text(userAction.actionExplanation),
          Padding(
            // we can show tour photo here when user clicks this area user will go to the related tour page.
            padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    userAction.route.name + 'Text Longg',
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                SizedBox(
                  width: 5,
                ),
                CircleAvatar(
                  backgroundColor: Colors.black26,
                ),
              ],
            ),
          ),
        ],
      ),
    );

Uważam tę odpowiedź na skrócony tekst, ale daje błąd w moim przypadku: Włóż przepełnienie elipsis w tekście

Dziennik błędów:

I/flutter (10591): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10591): The following message was thrown during layout:
I/flutter (10591): A RenderFlex overflowed by 73 pixels on the right.
I/flutter (10591): 
I/flutter (10591): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter (10591): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (10591): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (10591): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (10591): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (10591): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (10591): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (10591): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (10591): like a ListView.
I/flutter (10591): The specific RenderFlex in question is:
I/flutter (10591):   RenderFlex#f2700 OVERFLOWING
I/flutter (10591):   creator: Row ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← Column ← _SingleChildViewport
I/flutter (10591):   ← _ScrollableScope ← IgnorePointer-[GlobalKey#4a6a1] ← Semantics ← Listener ← _GestureSemantics ←
I/flutter (10591):   ⋯
I/flutter (10591):   parentData: offset=Offset(1.0, 1.0) (can use size)
I/flutter (10591):   constraints: BoxConstraints(w=409.4, h=55.0)
I/flutter (10591):   size: Size(409.4, 55.0)
I/flutter (10591):   direction: horizontal
I/flutter (10591):   mainAxisAlignment: spaceBetween
I/flutter (10591):   mainAxisSize: max
I/flutter (10591):   crossAxisAlignment: center
I/flutter (10591):   textDirection: ltr
I/flutter (10591):   verticalDirection: down
I/flutter (10591): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (10591): ════════════════════════════════════════════════════════════════════════════════════════════════════
0
cipli onat 24 luty 2019, 11:55

2 odpowiedzi

Najlepsza odpowiedź

Nie mogłem znaleźć, dlaczego tekst przelewem.ellipsis daje błąd, ale radzę sobie z moim problemem:

Znalazłem widżet, który może zrobić to, co chciałem zrobić, nazwa widgetu to Tooltip

Obsługuję problem skrócić problem z tym kodem:

                Tooltip(
                  message: userAction.route.name,
                  child: Text(
                    userAction.route.name.length < 10
                        ? userAction.route.name
                        : userAction.route.name.substring(0, 10) + '...',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                )

enter image description here

0
cipli onat 24 luty 2019, 09:18

To jest rozwiązanie robocze. Zmodyfikowałem to trochę, aby to pracować. Spróbuj tego.

Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
  height: MediaQuery.of(context).size.height / 12,
  width: MediaQuery.of(context).size.width,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
        child: Row(
          children: <Widget>[SizedBox(width: 5), Text("Text 1 ")],
        ),
      ),
      Text("Text 2 "),
      Expanded(
        child: Text(
          'Text which is very long and very very long indeed and getting things ready',
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      SizedBox(width: 5),
      CircleAvatar(backgroundColor: Colors.black26),
    ],
  ),
);
1
CopsOnRoad 24 luty 2019, 09:37