[英]How to add border on a container inside a row widget in Flutter?
Container(
// decoration: BoxDecoration(
// border: Border.all(color: Colors.black45),
// borderRadius: BorderRadius.circular(8.0),
// ),
child: Row(
children: <Widget>[
Container(
child: Text("hi"),
margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width *0.42,
height: 90,
color: Colors.black12,
),
Container(
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42 ,
height: 90,
color: Colors.black12,
)
],
),
),
我可以在外部容器上使用 Box 裝飾添加邊框,但是當我嘗試對內部容器執行相同操作時,它會拋出一個錯誤。 問題是什么以及如何解決?
為了在行小部件內的容器上添加邊框,我們必須對內部容器使用裝飾。 一旦您發布錯誤,我們可以更好地回答您,但我認為以下代碼將對您有所幫助。 如果你使用的是裝飾,那么你不能直接在容器中添加顏色屬性,它應該只是在裝飾中。
Container(
child: Row(
children: <Widget>[
Container(
child: Text("hi"),
margin: EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
shape: BoxShape.rectangle,
border: Border.all(
color: Colors.blue,
width: 4,
)),
),
Container(
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
shape: BoxShape.rectangle,
border: Border.all(
color: Colors.blue,
width: 4,
)),
)
],
),
),
在容器小部件中,您不能同時使用color
和decoration
。 從Container
移除color
屬性並將其移動到BoxDecoration
小部件中
這應該有效:
Container(
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
borderRadius: BorderRadius.circular(8.0),
color: Colors.black12, //add it here
),
child: Text("hi"),
margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width *0.42,
height: 90,
//color: Colors.black12, //must be removed
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
borderRadius: BorderRadius.circular(8.0),
color: Colors.black12, //add it here
),
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42 ,
height: 90,
//color: Colors.black12, // must be removed
)
],
),
),
考慮使用簡陋的 Divider 小部件來使事情變得簡單。 如果將它添加到行中列的底部,它將添加一條線作為邊框。
const Divider(height: 1.0,),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.