Flutter 大小的容器到其中的内容
Flutter size container to content within it
我正在尝试在我的小部件中创建一个框，该框将根据其中发布的内容动态调整大小，但它似乎在溢出时被截断了。
Padding _buildReviewsSnapshot(Tasker user) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
children: List.generate(6, (index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
style: Theme.of(context).textTheme.bodyText1),
Text("- Charlee R",
style: Theme.of(context).textTheme.bodyText2),
]),
));
}),
)),
],
));
}
您可以使用 `Flexible' 使容器根据其内容改变其大小
*编辑好像误会了，抱歉。尝试将我之前提到的 Flexible 更改为 Wrap 小部件。
试试下面的代码希望对你有帮助。有两种显示输出的方法
如果您显示您可以使用的内容的全文
SingleChildScrollView() 把你的 Column() 包在里面
SingleChildScrollView() 参考 here
SingleChildScrollView(
child: Column(
children: [
Row(
children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
],
),
const SizedBox(
height: 10,
),
Text(
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
style: Theme.of(context).textTheme.bodyText1,
),
Text(
"- Charlee R",
style: Theme.of(context).textTheme.bodyText2,
),
],
),
),
您使用 SingleChildScrollView 的结果屏幕 ->
将您的 Text 小部件添加到 Expanded 参考 Expanded 小部件 here:
Expanded(
child: Text(
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
style: Theme.of(context).textTheme.bodyText1,
),
),
您的结果屏幕使用 Expanded->
如果您希望所有容器大小相同，请使用此代码。如果不检查第二个答案：-
答案一：-
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
children: List.generate(6, (index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
style: Theme.of(context).textTheme.bodyText1,
overflow: TextOverflow.ellipsis,
maxLines: 5,
),
const SizedBox(height: 10),
SizedBox(
width: 150,
child: Text(
"- Charlee R",
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.right,
),
),
]),
));
}),
)),
],
)),
答案2：-
使用这个包flutter_staggered_grid_view。使用这个包use可以创建这些类型的容器。
输出：-
代码：-
import 'package:archive/UI/screens/home_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Demo(),
);
}
}
class Demo extends StatelessWidget {
String content =
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on";
String content1 =
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on ";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: StaggeredGridView.countBuilder(
staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
crossAxisCount: 2,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color:
const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
index.isEven ? content : content1,
style: Theme.of(context).textTheme.bodyText1,
),
const SizedBox(height: 10),
SizedBox(
width: 150,
child: Text(
"- Charlee R",
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.right,
),
),
]),
));
}),
),
],
)),
);
}
}
希望这个回答对你有用。
尝试使用 ConstrainedBox。它将调整父窗口小部件的大小以适应子窗口小部件的大小。
我正在尝试在我的小部件中创建一个框，该框将根据其中发布的内容动态调整大小，但它似乎在溢出时被截断了。
Padding _buildReviewsSnapshot(Tasker user) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
children: List.generate(6, (index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
style: Theme.of(context).textTheme.bodyText1),
Text("- Charlee R",
style: Theme.of(context).textTheme.bodyText2),
]),
));
}),
)),
],
));
}
您可以使用 `Flexible' 使容器根据其内容改变其大小
*编辑好像误会了，抱歉。尝试将我之前提到的 Flexible 更改为 Wrap 小部件。
试试下面的代码希望对你有帮助。有两种显示输出的方法
如果您显示您可以使用的内容的全文
SingleChildScrollView()把你的Column()包在里面 SingleChildScrollView() 参考 hereSingleChildScrollView( child: Column( children: [ Row( children: const [ Icon( Icons.star_rate, size: 16, color: Colors.amber, ), Icon( Icons.star_rate, size: 16, color: Colors.amber, ), Icon( Icons.star_rate, size: 16, color: Colors.amber, ), Icon( Icons.star_rate, size: 16, color: Colors.amber, ), Icon( Icons.star_border, size: 16, color: Colors.grey, ), ], ), const SizedBox( height: 10, ), Text( "Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on", style: Theme.of(context).textTheme.bodyText1, ), Text( "- Charlee R", style: Theme.of(context).textTheme.bodyText2, ), ], ), ),
您使用 SingleChildScrollView 的结果屏幕 ->
将您的
Text小部件添加到Expanded参考Expanded小部件 here:Expanded( child: Text( "Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on", style: Theme.of(context).textTheme.bodyText1, ), ),
您的结果屏幕使用 Expanded->
如果您希望所有容器大小相同，请使用此代码。如果不检查第二个答案：-
答案一：-
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
children: List.generate(6, (index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
style: Theme.of(context).textTheme.bodyText1,
overflow: TextOverflow.ellipsis,
maxLines: 5,
),
const SizedBox(height: 10),
SizedBox(
width: 150,
child: Text(
"- Charlee R",
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.right,
),
),
]),
));
}),
)),
],
)),
答案2：-
使用这个包flutter_staggered_grid_view。使用这个包use可以创建这些类型的容器。
输出：-
代码：-
import 'package:archive/UI/screens/home_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Demo(),
);
}
}
class Demo extends StatelessWidget {
String content =
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on";
String content1 =
"Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on ";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
children: [
Expanded(
// flex: 3,
child: StaggeredGridView.countBuilder(
staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
crossAxisCount: 2,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color:
const Color.fromRGBO(212, 221, 230, 1)),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
margin: const EdgeInsets.all(6),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(children: [
Row(children: const [
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_rate,
size: 16,
color: Colors.amber,
),
Icon(
Icons.star_border,
size: 16,
color: Colors.grey,
),
]),
const SizedBox(height: 10),
Text(
index.isEven ? content : content1,
style: Theme.of(context).textTheme.bodyText1,
),
const SizedBox(height: 10),
SizedBox(
width: 150,
child: Text(
"- Charlee R",
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.right,
),
),
]),
));
}),
),
],
)),
);
}
}
希望这个回答对你有用。
尝试使用 ConstrainedBox。它将调整父窗口小部件的大小以适应子窗口小部件的大小。