我寻找答案,但是找不到。
为什么Column小部件在子小部件之间留有空白?
我想要从我的小部件布局中移除这个。以下是我的代码和空白位置。
代码!!
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Clock',
theme: ThemeData(
primaryColor: Colors.blue
),
home: Social(),
debugShowCheckedModeBanner: false,
);
}
}
class Social extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0
),
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Flexible(
flex: 1,
child: Row(
children: <Widget>[
ClipOval(
clipper: CircleClipper(),
child: Image.asset('assets/irene.jpg')
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
'Irene',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: 15.0
)
)
),
Align(
alignment: Alignment.centerLeft,
child: Text('Yesterday, Ney York')
)
],
),
),
),
Align(
alignment: Alignment.topRight,
child: IconButton(
color: Theme.of(context).primaryColor,
icon: Icon(Icons.menu),
onPressed: (){},
),
)
],
),
),
Container(
width: MediaQuery.of(context).size.width/1.1,
height: MediaQuery.of(context).size.height/2,
child: Card(
child: Image.asset('assets/irene.jpg'),
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
elevation: 10.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 30.0,right: 30.0,top: 15.0),
child: Row(
children: <Widget>[
Image(
image: AssetImage('assets/like.png'),
width: 30.0,
height: 30.0,
),
SizedBox(width: 20.0,),
Image.asset('assets/chat.png'),
Expanded(child: Container()),
Image.asset('assets/share.png'),
],
),
),
Expanded(child: Container()),
],
),
);
}
}
class CircleClipper extends CustomClipper<Rect> {
@override
Rect getClip(Size size) {
return Rect.fromCircle(center: Offset(size.width/2,size.height/4), radius: size.width/3);
}
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) {
return true;
}
}
我该如何修复它,以及我需要使用哪些小部件?
为了使Column的子小部件具有大小,我必须使用Flexible、Expanded等。
是否还有其他小部件可以满足这个条件?