在Flutter中在其父对象内对角对齐

Question

我正在尝试构建由2个不同组件组成的小部件：

• 图像
• 带文本的容器

我可以在图像之间进行垂直分割，但我的目标是使具有对角线文本的分割对角线也对齐（或使项目自身与对角线对齐）。

我可以使用以下资源来完成大部分工作：Custom flutter widget shape，但是在将文本与父行对角对齐时遇到了问题。如图所示

这是我现在的代码

     Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                alignment: Alignment.centerLeft,
                fit: BoxFit.fitHeight,
                image: NetworkImage(
                    'https://media.sproutsocial.com/uploads/2014/02/Facebook-Campaign-Article-Main-Image2.png'),
              ),
            ),
          ),
          ClipPath(
            clipper: TrapeziumClipper(),
            child: Container(
              color: Colors.white,
              padding: EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  Text('1'),
                  Text('2'),
                  Text('3'),
                  Text('4'),
                  Text('5'),
                  Text('6'),
                ],
                crossAxisAlignment: CrossAxisAlignment.center,
              ),
              width: double.infinity,
            ),
          )
        ],
      ),

这是我的快船线画。

 class TrapeziumClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(size.width, 0.0);
    path.lineTo(size.width * 53 / 100, 0.0);
    path.lineTo(size.width * 1 / 3, size.height);
    path.lineTo(size.width, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(TrapeziumClipper oldClipper) => false;
}

Answer 1

因此，在尝试使用CustomMultiChildLayout和更多其他小部件后，我得出的结论是，除了抱怨“ hacks”外，实际上没有其他办法。对我来说一个简单的例子是：

Container(
        height: double.infinity,
        width: double.infinity,
        padding: const EdgeInsets.only(top: 15, bottom: 10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Container(
              width: (mediaQuery.size.width * 53 / 100) - mediaQuery.size.width * 0.14,
              padding: EdgeInsets.only(right: 15),
              height: 15,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    '23. feb 2020',
                    style: TextStyle(
                      fontSize: 11,
                      fontFamily: 'Red Hat Text',
                      fontWeight: FontWeight.bold,
                      color: AppColors.lightGrey,
                    ),
                  ),
                  Text(
                    '21.00',
                    style: TextStyle(
                      fontSize: 11,
                      fontFamily: 'Red Hat Text',
                      fontWeight: FontWeight.bold,
                      color: AppColors.lightGrey,
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 5,
            ),
            Container(
              width: (mediaQuery.size.width * 57 / 100) - mediaQuery.size.width * 0.14,
              padding: EdgeInsets.only(right: 15),
              height: 20,
              child: FittedBox(
                alignment: Alignment.centerLeft,
                fit: BoxFit.scaleDown,
                child: Text(
                  'item title name',
                  style: TextStyle(
                      fontSize: 18,
                      fontFamily: 'Red Hat Text',
                      fontWeight: FontWeight.bold,
                      color: AppColors.white),
                ),
              ),
            ),
            SizedBox(
              height: 5,
            ),
            Container(
              width: (mediaQuery.size.width * 61 / 100) - mediaQuery.size.width * 0.14,
              padding: EdgeInsets.only(right: 15),
              height: 15,
              child: Text(
                'address',
                style: TextStyle(
                  fontSize: 11,
                  fontFamily: 'Red Hat Text',
                  fontWeight: FontWeight.bold,
                  color: AppColors.lightGrey,
                ),
              ),
            ),
            Expanded(
              child: Container(),
            ),
            Container(
              width: (mediaQuery.size.width * 3.7 / 5) - mediaQuery.size.width * 0.14,
              padding: EdgeInsets.only(right: 15),
              height: 32,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    'GOING',
                    style: TextStyle(
                      fontSize: 24,
                      fontFamily: 'Red Hat Text',
                      fontWeight: FontWeight.bold,
                      color: AppColors.green,
                    ),
                  ),
                  Container(
                    alignment: Alignment.bottomRight,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          AppIcons.guests,
                          size: 15,
                          color: AppColors.white,
                        ),
                        SizedBox(
                          width: 15,
                        ),
                        Text(
                          '24',
                          style: TextStyle(
                              fontSize: 20,
                              fontFamily: 'Red Hat Text',
                              fontWeight: FontWeight.bold,
                              color: AppColors.white),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),

基本上，我得到的是元素的屏幕尺寸，然后通过简单的测试，我计算出Container（）可以占用多少宽度以保持在梯形区域中。我唯一关心的是大型设备/小型设备的响应能力，但我希望它会起作用，因为它基于mediaquery的大小而不是固定的大小。