我目前正在学习需要重新创建此布局的课程:Layout design
我正在努力在支架中心的第二个盒子中设置透明的黄色。这是我的代码:
class myApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(scaffoldBackgroundColor: Colors.teal),
home: Scaffold(
body: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
color: Colors.red,
height: double.infinity,
width: 100.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.yellow,
height: 100.0,
width: 100.0,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellowAccent,
)
]),
Container(
color: Colors.blue,
height: double.infinity,
width: 100.0,
)
],
),
),
),
);
}
}
谢谢您的帮助。
仅与Colors.yellow.withOpacity(0.3)
一起用于第二个方框
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(scaffoldBackgroundColor: Colors.teal),
home: Scaffold(
body: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
color: Colors.red,
height: double.infinity,
width: 100.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.yellow,
height: 100.0,
width: 100.0,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow.withOpacity(0.3),
)
]),
Container(
color: Colors.blue,
height: double.infinity,
width: 100.0,
)
],
),
),
),
);
}
}