dart 如何在flutter中为容器及其子容器创建单一边界

zbdgwd5y 于 2023-07-31 发布在 Flutter

关注(0)|答案(2)|浏览(98)

我试图使两个容器与边界线，但当我实现了父边界线和子容器线是不是在同一行绘制，请参阅此图片[！[在此处输入图像描述][1]][1]
下面是代码

return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white70,
              border: Border.fromBorderSide(
                BorderSide(
                  color: Colors.red,
                ),
              ),
              borderRadius: const BorderRadius.all(Radius.circular(8)),
            ),
            child: Row(children: [
              Container(
                decoration: BoxDecoration(
                  color: Colors.white70,
                  border: Border.fromBorderSide(
                    BorderSide(
                      color: Colors.red,
                    ),
                  ),
                  borderRadius: const BorderRadius.all(Radius.circular(8)),
                ),
                child: Expanded(
                    child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text('data1'),
                )),
              )
            ]),
          ),
        ));
  }

字符串
任何帮助，提前感谢。[1]：https://i.stack.imgur.com/TAuwh.png

dart

来源：https://stackoverflow.com/questions/76762509/how-to-make-single-borderline-for-a-container-and-for-its-child-container-in-flu

2条答案

按热度按时间

hivapdat1#

你可以使用堆栈来实现。就像这段代码

Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: 40,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.red, width: 1)
            ),
          ),
          Container(
            height: 40,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.red, width: 1)
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('date'),
              ],
            ),
          )
        ]
      )

字符串

赞(0）回复(0）举报 2023-07-31

y53ybaqx2#

试试下面的代码：

Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("Data"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white70,
            border: Border.fromBorderSide(
              BorderSide(
                color: Colors.red,
              ),
            ),
            borderRadius: const BorderRadius.all(Radius.circular(8)),
          ),
          child: Row(children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.white70,
                border: Border(
                  right: BorderSide(
                    color: Colors.red,
                    width: 1.0,
                  ),
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text('data1'),
              ),
            )
          ]),
        ),
      ),
    );
  }
}

字符串

赞(0）回复(0）举报 2023-07-31

我来回答

dart 如何在flutter中为容器及其子容器创建单一边界

2条答案

相关问题

热门标签

最新问答