flutter - 容器之间的自定义空间

Question

我想在一行内的两个容器之间创建自定义空间。正如您所看到的，当图像容器结束时，另一个容器开始。尝试通过使用 Padding 包装 Row 来做到这一点，但没有效果。

这是我的代码

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Align(
          alignment: Alignment.centerLeft,
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Container(
                    height: MediaQuery.of(context).size.height * 0.75,
                    width: MediaQuery.of(context).size.width / 2,
                    child: Stack(
                      children: <Widget>[
                        Container(
                          color: Colors.lightBlue,
                        ),
                        CustomPaint(
                          size: Size.infinite,
                          painter: MyPainter(pointsList: points),
                        ),
                        displayImage(context, widget.imagePath),
                      ],
                    ),
                  ),
                  Container(
                    height: MediaQuery.of(context).size.height * 0.75,
                    width: MediaQuery.of(context).size.width / 4,
                    color: Colors.blue,
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );

这是我到目前为止的结果：

标签： flutterdartflutter-layout

Answer 1

我认为你可以使用灵活：

Row(
 children:
   [
     Flexible(
        flex 4,
        fit: FlexFit.tight,
        child: Container(color: Colors.green),),
     Flexible(
        flex 1,
        fit: FlexFit.tight,
        child: Container(color: Colors.white),),
     Flexible(
        flex 2,
        fit: FlexFit.tight,
        child: Container(color: Colors.yellow),),
   ],),