flutter - Flutter 灵活卡

Question

我在卡中使用灵活的小部件时遇到问题。我使用了约束框，但我想使用不设置宽度的小部件。但是如果我使用灵活的小部件，卡片就不会再出现了。我的目标是让文本使用所有可用空间而不设置恒定宽度这是我的代码：

    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,
          ),
        ),
      ),
    )
    )
);
  }
 }

希望可以有人帮帮我 ：）

标签： fluttercardadaptive-layout

Answer 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,
                  ),
                ),
              ),
            )
        ),
      ),
    );
  }
}