颤振卡颜色答案

【问题标题】：Flutter Card Color颤振卡颜色
【发布时间】：2019-12-04 21:47:01
【问题描述】：

我想制作这张我分成列的卡片（扩展小部件），我面临的问题是：我无法将颜色容器（右列的父级）设置为全高，所以只有一部分显示彩色背景。

我有什么：

我想要什么：

我尝试了 Flutter Inspector 工具，发现 Container 及其子 Column 没有达到全高（即使在输入 mainAxisSize: MainAxisSize.max 之后）
我也尝试使用 FractionSized.. 而不是使用 Expanded.. 但不是运气。

代码：

    import 'package:flutter/material.dart';

    class SubjectPage extends StatelessWidget {
      final String dayStr;
      SubjectPage(this.dayStr);

      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 0),
          child: Column(
            children: <Widget>[
              Card(
                child: Row(
                  children: <Widget>[
                    // Column 1
                    Expanded(
                      flex: 7,
                      child: Padding(
                        padding: EdgeInsets.all(20.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            getTitle("UEC607"),
                            getSubName("Data Communication & Protocol"),
                            getVenue("E-204"),
                          ],
                        ),
                      ),
                    ),
                    // Column 2
                    // The Place where I am Stuck//
                    Expanded(
                      flex: 3,
                      child: Container(
                        color: Colors.blue,
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            getType("L"),
                            getTime("9:00"),
                          ],
                        ),
                      ),
                    )
                  // COlumn 2 End
                  ],
                ),
              )
            ],
          ),
        );
      }

      // Get Title Widget
      Widget getTitle(String title) {
        return Padding(
          padding: EdgeInsets.only(bottom: 8.0),
          child: Text(title),
        );
      }

      // Get Subject Name
      Widget getSubName(String subName) {
        return Padding(
          padding: EdgeInsets.only(bottom: 25.0),
          child: Text(subName),
        );
      }

      // Get Venue Name
      Widget getVenue(String venue) {
        return Padding(
          padding: EdgeInsets.only(bottom: 0.0),
          child: Text(venue),
        );
      }

      Widget getType(String type) {
        return Padding(
          padding: EdgeInsets.only(bottom: 10.0),
          child: Text(type),
        );
      }

      Color getColor(String type) {
        if (type == "L") {
          return Color(0xff74B1E9);
        }
      }

      Widget getTime(String time) {
        return Text(time);
      }
    }

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

设置容器高度

Expanded(
                      flex: 3,
                      child: Container(
                        height: double.infinity,
                        color: Colors.blue,
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            getType("L"),
                            getTime("9:00"),
                          ],
                        ),
                      ),
                    )

【讨论】：

那没用，已经试过了。它正在将内容推出屏幕（下）。

【解决方案2】：

对我来说，确定哪个Widget 应该使用固定的空间/大小以及哪个应该扩展以适应空间/大小会有所帮助

然后我使用Column 和Row 构建小部件的布局（这使得准备和决定在Expanded 或Flexible 小部件中包装小部件的位置变得容易）

但这里是一个简短的例子：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Stackoverflow'),
      ),

      body: Container(
        margin: EdgeInsets.all(10),

        width: double.infinity,
        height: 100,

        child: Row(
          children: <Widget>[
            // Texts
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  // UEC607 & Digital communication text
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            'UEC607',                      
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: Colors.grey
                            ),                      
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            'Digital communication',
                            style: TextStyle(
                              fontSize: 20,                        
                              color: Colors.black
                            ),
                          ),
                        ],
                      )
                    ],
                  ),

                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        Text(
                          'E-206',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: Colors.black
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),

            // Card
            Container(
              width: 90,

              color: Colors.lightBlue.withOpacity(.8),

              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'L',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Colors.white
                    ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Text(
                    '09:00',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Colors.white
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

它看起来像这样：

【讨论】：

【解决方案3】：

使用FittedBox 包裹蓝色容器

Expanded(
                  flex: 2,
                  child: FittedBox(
                    child: Container(
                      color: Colors.blue,
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          getType("L"),
                          getTime("9:00"),
                        ],
                      ),
                    ),
                  ),
                )

【讨论】：

【解决方案4】：

您应该将Row 小部件放在IntrinsicHeight 小部件中，并将Row 的crossAxisAlignment 属性设置为等于CrossAxisAlignment.stretch。它会解决你的问题。

IntrinsicHeight(
   child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[]
   ),
)

【讨论】：