Flutter 灵活卡
Posted
技术标签:
【中文标题】Flutter 灵活卡【英文标题】：Flutter Flexible in Card 【发布时间】：2021-10-30 19:29:25 【问题描述】：我在卡片中使用灵活小部件时遇到问题。我使用了约束框，但我想使用不设置宽度的小部件。但是如果我使用灵活的小部件，卡片就不会再出现了。 我的目标是让文本使用所有可用空间而不设置恒定宽度 这是我的代码：
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:wemaind_mobile_app/pages/tasks/tasks_page.dart';
import 'package:wemaind_mobile_app/theme/colors.dart';
import 'board_entity.dart';
import 'task_counter.dart';
class BoardWidget extends StatelessWidget
final BoardEntity board;
static const colors = WemaindColors();
BoardWidget(this.board);
@override
Widget build(BuildContext context)
final theme = Theme.of(context);
return ConstrainedBox(constraints: BoxConstraints(maxWidth: 500, minWidth: 280, minHeight: 300),
child:GestureDetector(
onTap: ()
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)
return TasksPage(board: board);
));
,
child:
Container(
height: MediaQuery.of(context).size.height * 0.2,
child: Card(margin: EdgeInsets.only(top: 0, bottom: 16, left: 16, right: 16),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic,
children: [
Flexible(
child: Text(board.name,
style: theme.textTheme.headline2,
)),
if (board.bookmarked) Icon(Icons.star, color: colors.orange),
],
),
Row(children:[
Flexible(
child: Text(board.role.toUpperCase(),style: theme.textTheme.headline4,overflow: TextOverflow.ellipsis,)),
]),
]),
Column(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,children: [
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text(board.tasks.all.toString(), style: theme.textTheme.headline1),
Icon(Icons.more_vert, color: colors.blue.shade800, size: 32),
]),
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text('TASK'.toUpperCase(), style: theme.textTheme.headline5),
])
]),
]),
Table(
children: [
TableRow(children: [
TaskCounter('PRIORITARI', Icons.bolt, colors.orange, board.tasks.prioritized),
TaskCounter('IN SCADENZA', Icons.alarm, colors.red, board.tasks.expiring),
Container(),
]),
TableRow(children: [
TaskCounter('MIEI', Icons.person, theme.accentColor, board.tasks.owned),
TaskCounter('DEL TEAM', Icons.group, theme.accentColor, board.tasks.teamOwned),
TaskCounter('IN AVVIO', Icons.calendar_today, theme.accentColor, board.tasks.starting),
])
]
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
),
),
),
)
)
);
希望有人可以帮助我:)
【问题讨论】：
【参考方案1】：尝试更智能地使用空间。此代码将使您免于遇到问题
class BoardWidget extends StatelessWidget
// final BoardEntity board;
// static const colors = WemaindColors();
// BoardWidget(this.board);
@override
Widget build(BuildContext context)
final theme = Theme.of(context);
return Scaffold(
body: SafeArea(
child: GestureDetector(
// onTap: ()
// Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)
// return TasksPage(board: board);
// ));
// ,
child:
Container(
height: 300,
width: 400,
child: Card(margin: EdgeInsets.only(top: 0, bottom: 16, left: 16, right: 16),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Expanded(
child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Text("board.name",
),
),
if (true) Icon(Icons.star, color: Colors.orange),
],
),
),
Expanded(
child: Row(children:[
Expanded(child: Text("board.role.toUpperCase()", overflow: TextOverflow.ellipsis,)),
]),
),
]),
),
Expanded(
child: Column(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,children: [
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Expanded(child: Text("board.tasks.all.toString()")),
Icon(Icons.more_vert, color: Colors.blue.shade800, size: 32),
]),
),
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text('TASK'.toUpperCase()),
]),
)
]),
),
]),
),
Table(
children: [
TableRow(children: [
Container(child: Icon(Icons.bolt)),
Container(child: Icon(Icons.alarm)),
Container(),
]),
TableRow(children: [
Container(child: Icon(Icons.person),),
Container(child: Icon(Icons.group),),
Container(child: Icon(Icons.calendar_today),),
])
]
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
),
),
),
)
),
),
);
【讨论】：
我尝试使用您的代码，但该卡未显示在模拟器中，我在另一个类中调用此小部件： class BoardsList extends StatelessWidget final List以上是关于Flutter 灵活卡的主要内容，如果未能解决你的问题，请参考以下文章
Flutter：BottomNavigationBar在选项卡更改时重建页面
Flutter - 当兄弟姐妹灵活时，扩展不会占用所有可用空间