[英]Container widget overflows other widgets- Flutter
這是預期的屏幕,容器將根據顯示的文本折疊和展開,並且應該只占用放置其他圖標留下的空間。
但請參閱 flutter 實現的屏幕。 圖標在容器擴展時向右移動,並顯示溢出像素錯誤。
我的代碼
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.black,
size: 34,
),
onPressed: () {},
),
//container section
GestureDetector(
child: Container(
margin: const EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.red.shade100,
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Align(
alignment: Alignment.centerLeft,
child: Row(children: const <Widget>[
Text(
"Content is here",
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black54,
fontSize: 19.0,
fontWeight: FontWeight.bold),
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
]),
),
),
),
onTap: () {
//todo show bottom sheet dialog here.
},
),
const Spacer(), // I just added one line
IconButton(
icon: Image.asset('assets/images/ic_scan.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_notification.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_search.png'),
iconSize: 20,
onPressed: () {},
),
],
),
);
刪除墊片並在靈活的小部件中添加下拉菜單
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.black,
size: 34,
),
onPressed: () {},
),
Flexible(//<-------Flexible
child: GestureDetector(
child: Container(
margin: const EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.red.shade100,
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Align(
alignment: Alignment.centerLeft,
child: Row(
children: const <Widget>[
Flexible(//<-------Flexible
child: Text(
"Content is here",
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black54,
fontSize: 19.0,
fontWeight: FontWeight.bold),
),
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
]),
),
),
),
onTap: () {
//todo show bottom sheet dialog here.
},
),
),
//Spacer() //<--------remove this
IconButton(
icon: Image.asset('assets/images/ic_scan.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_notification.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_search.png'),
iconSize: 20,
onPressed: () {},
),
],
),
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.