如何将文本包装在 RawChip 内?

huangapple go评论79阅读模式
英文:

How to wrap the text inside a RawChip?

问题

目前,我已经将自己画入了一个困境...

在Flutter中,我有以下代码片段:


 SingleChildScrollView(
   child: Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: [
       StreamBuilder(
         stream: globals.mWorkDatabase.getPictureFiles().watch(),
         builder: (context, snapshot) {
           if(snapshot.hasError){
             return Card(
               color: Colors.red,
               child: Padding(
                 padding: const EdgeInsets.all(4.0),
                 child: Text(
                   snapshot.error.toString(),
                   style: const TextStyle(color: Colors.yellow),),
               ),
             );
           }
           if(snapshot.connectionState==ConnectionState.waiting){
             return const CircularProgressIndicator();
           }
           if(snapshot.hasData){
             var pictureFiles = snapshot.data as List<PictureFile?>?;
             if(pictureFiles?.isNotEmpty==true){
               return ListView.builder(
                   physics: const NeverScrollableScrollPhysics(),
                   shrinkWrap: true,
                   reverse: true,
                   controller: ScrollController(),
                   itemCount: pictureFiles?.length,
                   itemBuilder: (context, index){
                     return Row(
                       mainAxisAlignment: MainAxisAlignment.start,
                       mainAxisSize: MainAxisSize.min,
                       children: [
                         Theme(
                           data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
                           child: RawChip( //<-- 我希望文本在RawChip内换行!
                             backgroundColor: const Color(0x77FFFFFF),
                             label: Text("${pictureFiles?[index]?.filePath}"),
                             avatar: const Icon(Icons.image_outlined),
                             onDeleted: (){
                             },
                             onPressed: (){
                             },
                           ),
                         ),
                       ],
                     );
                   }
               );
             }
           }
           return const Card(
             child: Padding(
               padding: EdgeInsets.all(4.0),
               child: Text("没有可用的图片..."),
             ),
           );
         }
       ),
     ],
   ),
 ),

问题是芯片内的文本溢出了,我需要显示芯片内的整个文本。是否可以让芯片内的文本换行?

英文:

Currently I have painted me into a corner...

In Flutter I have following code snippet:


 SingleChildScrollView(
   child: Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: [
       StreamBuilder(
         stream: globals.mWorkDatabase.getPictureFiles().watch(),
         builder: (context, snapshot) {
           if(snapshot.hasError){
             return Card(
               color: Colors.red,
               child: Padding(
                 padding: const EdgeInsets.all(4.0),
                 child: Text(
                   snapshot.error.toString(),
                   style: const TextStyle(color: Colors.yellow),),
               ),
             );
           }
           if(snapshot.connectionState==ConnectionState.waiting){
             return const CircularProgressIndicator();
           }
           if(snapshot.hasData){
             var pictureFiles = snapshot.data as List<PictureFile?>?;
             if(pictureFiles?.isNotEmpty==true){
               return ListView.builder(
                   physics: const NeverScrollableScrollPhysics(),
                   shrinkWrap: true,
                   reverse: true,
                   controller: ScrollController(),
                   itemCount: pictureFiles?.length,
                   itemBuilder: (context, index){
                     return Row(
                       mainAxisAlignment: MainAxisAlignment.start,
                       mainAxisSize: MainAxisSize.min,
                       children: [
                         Theme(
                           data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
                           child: RawChip( //<-- I want the text to wrap in RawChip !
                             backgroundColor: const Color(0x77FFFFFF),
                             label: Text("${pictureFiles?[index]?.filePath}"),
                             avatar: const Icon(Icons.image_outlined),
                             onDeleted: (){
                             },
                             onPressed: (){
                             },
                           ),
                         ),
                       ],
                     );
                   }
               );
             }
           }
           return const Card(
             child: Padding(
               padding: EdgeInsets.all(4.0),
               child: Text("No pictures available..."),
             ),
           );
         }
       ),
     ],
   ),
 ),

The trouble is that the texts in the Chips are overflown, and I need to show the whole text inside the chip. Is it possible to let the text inside the Chip wrap ?

如何将文本包装在 RawChip 内?

答案1

得分: 1

看起来你只需要将 Theme 包装在 Expanded 内。

示例:

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  const Test({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(           <--- 在这里使用 Expanded 包装
              child: Theme(
                data:
                    Theme.of(context).copyWith(canvasColor: Colors.transparent),
                child: RawChip(
                  backgroundColor: const Color(0x77FFFFFF),
                  label: Text("yasd asdh ad ajsd ajhds a sd" * 2),
                  avatar: const Icon(Icons.image_outlined),
                  onDeleted: () {},
                  onPressed: () {},
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

输出:

如何将文本包装在 RawChip 内?

英文:

Seems like you just have to wrap the Theme inside Expanded.

Example:

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  const Test({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(           <--- Here wrap with Expanded
              child: Theme(
                data:
                    Theme.of(context).copyWith(canvasColor: Colors.transparent),
                child: RawChip(
                  backgroundColor: const Color(0x77FFFFFF),
                  label: Text("yasd asdh ad ajsd ajhds a sd" * 2),
                  avatar: const Icon(Icons.image_outlined),
                  onDeleted: () {},
                  onPressed: () {},
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output:

如何将文本包装在 RawChip 内?

huangapple
  • 本文由 发表于 2023年6月1日 21:21:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76382349.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定