在Flutter中遇到了有关行和列的问题。

huangapple
go评论72阅读模式
英文:

Facing issue with row and column in flutter

问题

作为Flutter的初学者，我试图实现绿色小部件在顶部和底部以及右侧小部件部分的动态调整。此外，我正在寻求关于如何解决图像中显示的溢出问题的指导。

谢谢提前

在Flutter中遇到了有关行和列的问题。

我已经包含了我的代码，并尝试了各种方法来实现所需的设计。然而，我尚未成功完成它。是否有人可以为我提供如何实现这个设计的详细解释？

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return history();
  }

  Widget history() {
    return Container(
      color: Colors.lightBlue,
      child: Row(
        children: [
          leftContainer("1", Colors.green),
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                rightContainer(
                    "Forgot to attendance punch, i was in the office from 8.30 to 6.20",
                    null,
                    false),
                rightContainer("23/01/2023-23/01/2023", Icons.date_range, true),
                rightContainer("08:30-18:20", Icons.access_time, true),
                rightContainer("Accepted", Icons.done, true),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget leftContainer(String totalDays, Color color) {
    return Container(
      padding: const EdgeInsets.only(top: 16, bottom: 16, left: 8, right: 8),
      decoration: BoxDecoration(
          color: color,
          borderRadius: const BorderRadius.only(
              topLeft: Radius.zero,
              topRight: Radius.circular(8.0),
              bottomLeft: Radius.zero,
              bottomRight: Radius.circular(8.0)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          customTextLeftContainer(totalDays),
          customTextLeftContainer("Day"),
        ],
      ),
    );
  }

  Widget rightContainer(String value, IconData? iconData, bool iconShowed) {
    return Container(
      margin: const EdgeInsets.only(left: 8),
      child: Row(
        children: [
          iconShowed ? Icon(iconData, size: 14) : Container(),
          customTextRightContainer(value, iconShowed),
        ],
      ),
    );
  }

  Widget customTextLeftContainer(String value) {
    return Text(value,
        style: const TextStyle(
            fontFamily: 'Rubik', fontSize: 12, fontWeight: FontWeight.bold));
  }

  Widget customTextRightContainer(String value, bool iconShowed) {
    return Container(
      margin: iconShowed ? const EdgeInsets.only(left: 8) : const EdgeInsets.only(left: 0),
      child: Text(
        value,
        style: const TextStyle(
          fontFamily: 'Rubik',
        ),
      ),
    );
  }
}

我想要这个

在Flutter中遇到了有关行和列的问题。

英文:

As a beginner in Flutter, I am trying to achieve dynamic adjustment of the green widget on the top and bottom sides and the right widget part's top and bottom sides. Additionally, I am seeking guidance on how to solve the overflow issue shown in the image.

thanks in advance

在Flutter中遇到了有关行和列的问题。

I have included my code below, and I have attempted various methods to achieve the desired design. However, I have not been successful in accomplishing it. Could someone provide me with a detailed explanation of how to achieve this design?

import 'package:flutter/material.dart';
class Test extends StatelessWidget {
const IomHistory2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return history();
}
Widget history() {
return Container(
color: Colors.lightBlue,
child: Row(
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
leftContainer("1", Colors.green),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
rightContainer(
"Forgot to attendance punch, i was in the office from 8.30 to 6.20",
null,
false),
rightContainer("23/01/2023-23/01/2023", Icons.date_range, true),
rightContainer("08:30-18:20", Icons.access_time, true),
rightContainer("Accepted", Icons.done, true),
],
),
)
],
),
);
}
Widget leftContainer(String totalDays, Color color) {
return Container(
padding: const EdgeInsets.only(top: 16, bottom: 16, left: 8, right: 8),
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.circular(8.0),
bottomLeft: Radius.zero,
bottomRight: Radius.circular(8.0))),
child: Column(
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
customTextLeftContainer(totalDays),
customTextLeftContainer("Day"),
],
),
);
}
Widget rightContainer(String value, IconData? iconData, bool iconShowed) {
return Container(
margin: const EdgeInsets.only(left: 8),
child: Row(
children: [
iconShowed ? Icon(size: 14, iconData) : Container(),
customTextRightContainer(value, iconShowed)
],
),
);
}
Widget customTextLeftContainer(String value) {
return Text(value,
style: const TextStyle(
fontFamily: 'Rubik', fontSize: 12, fontWeight: FontWeight.bold));
}
Widget customTextRightContainer(String value, bool iconShowed) {
return Container(
margin: iconShowed
? const EdgeInsets.only(left: 8)
: const EdgeInsets.only(left: 0),
child: Text(
value,
style: const TextStyle(
fontFamily: 'Rubik',
),
),
);
}
}

I want this

在Flutter中遇到了有关行和列的问题。

答案1

得分: 1

你可以使用Intrinsic小部件将Row包装起来，然后使用crossAxisAlignment: CrossAxisAlignment.stretch。

在必要的地方使用Expanded小部件。

输出:

在Flutter中遇到了有关行和列的问题。

完整代码:

  Widget history() {
    return Container(
      margin: EdgeInsets.only(top: 32),
      color: Colors.lightBlue,
      child: IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            leftContainer("1", Colors.green),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                // mainAxisSize: MainAxisSize.min,
                children: [
                  rightContainer(
                      "Forgot to attendance punch, i was in the office from 8.30 to 6.20",
                      null,
                      false),
                  rightContainer(
                      "23/01/2023-23/01/2023", Icons.date_range, true),
                  rightContainer("08:30-18:20", Icons.access_time, true),
                  rightContainer("Accepted", Icons.done, true),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget leftContainer(String totalDays, Color color) {
    return Container(
      padding: const EdgeInsets.only(top: 16, bottom: 16, left: 8, right: 8),
      decoration: BoxDecoration(
          color: color,
          borderRadius: const BorderRadius.only(
              topLeft: Radius.zero,
              topRight: Radius.circular(8.0),
              bottomLeft: Radius.zero,
              bottomRight: Radius.circular(8.0)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          customTextLeftContainer(totalDays),
          customTextLeftContainer("Day"),
        ],
      ),
    );
  }

  Widget rightContainer(String value, IconData? iconData, bool iconShowed) {
    return Container(
      margin: const EdgeInsets.only(left: 8),
      child: Row(
        children: [
          iconShowed ? Icon(size: 14, iconData) : Container(),
          Expanded(child: customTextRightContainer(value, iconShowed)),
        ],
      ),
    );
  }

  Widget customTextLeftContainer(String value) {
    return Text(value,
        style: const TextStyle(
            fontFamily: 'Rubik', fontSize: 12, fontWeight: FontWeight.bold),
    );
  }

  Widget customTextRightContainer(String value, bool iconShowed) {
    return Container(
      margin: iconShowed
          ? const EdgeInsets.only(left: 8)
          : const EdgeInsets.only(left: 0),
      child: Text(
        value,
        style: const TextStyle(
          fontFamily: 'Rubik',
        ),
      ),
    );
  }
}


<details>
<summary>英文:</summary>
You can wrap `Row` with `Intrinsic` Widget and use `crossAxisAlignment: CrossAxisAlignment.stretch`.
And use `Expanded` Widget where necessary.
**Output:**
[![enter image description here][1]][1]
**Complete code:**

Widget history() {
return Container(
margin: EdgeInsets.only(top: 32),
color: Colors.lightBlue,
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
leftContainer("1", Colors.green),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisSize: MainAxisSize.min,
children: [
rightContainer(
"Forgot to attendance punch, i was in the office from 8.30 to 6.20",
null,
false),
rightContainer(
"23/01/2023-23/01/2023", Icons.date_range, true),
rightContainer("08:30-18:20", Icons.access_time, true),
rightContainer("Accepted", Icons.done, true),
],
),
)
],
),
),
);
}

Widget leftContainer(String totalDays, Color color) {
return Container(
padding: const EdgeInsets.only(top: 16, bottom: 16, left: 8, right: 8),
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.circular(8.0),
bottomLeft: Radius.zero,
bottomRight: Radius.circular(8.0))),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
customTextLeftContainer(totalDays),
customTextLeftContainer("Day"),
],
),
);
}

Widget rightContainer(String value, IconData? iconData, bool iconShowed) {
return Container(
margin: const EdgeInsets.only(left: 8),
child: Row(
children: [
iconShowed ? Icon(size: 14, iconData) : Container(),
Expanded(child: customTextRightContainer(value, iconShowed))
],
),
);
}

Widget customTextLeftContainer(String value) {
return Text(value,
style: const TextStyle(
fontFamily: 'Rubik', fontSize: 12, fontWeight: FontWeight.bold));
}

Widget customTextRightContainer(String value, bool iconShowed) {
return Container(
margin: iconShowed
? const EdgeInsets.only(left: 8)
: const EdgeInsets.only(left: 0),
child: Text(
value,
style: const TextStyle(
fontFamily: 'Rubik',
),
),
);
}
}


[1]: https://i.stack.imgur.com/mLB9p.png
</details>

huangapple
  • 本文由 发表于 2023年3月1日 14:21:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/75600182.html
  • dart
  • flutter
  • user-interface
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定