英文:
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 ?
答案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: () {},
),
),
),
],
),
),
);
}
}
输出:
英文:
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:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论