我遇到一个问题,我想呈现不同高度的不同标签:
struct s1
这里是char*
类:
class OrdersCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return Card(
child: DefaultTabController(
// TODO : Edit this to make it dynamic number of orders
length: 4,
initialIndex: 0,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(80),
child: TabBar(
indicatorColor: Color(0xFF0A46D7),
tabs: [
Tab(
icon: Image.asset(
'assets/icon/Restaurant.png',
height: 30,
width: 30,
)),
Tab(
icon: Image.asset(
'assets/icon/Bakery.png',
height: 30,
width: 30,
),
),
Tab(
icon: Image.asset(
'assets/icon/Library.png',
height: 30,
width: 30,
)),
Tab(
icon: Image.asset(
'assets/icon/Library.png',
height: 30,
width: 30,
)),
],
),
),
body: TabBarView(
children: <Widget>[
ListedOrderItem(),
ListedOrderItem(),
ListedOrderItem(),
GenericOrderItem()
],
),
),
),
);
}
}
这里是ListedOrderItem
class ListedOrderItem extends StatelessWidget {
const boldTextStyle = TextStyle(fontWeight: FontWeight.bold, color: Colors.black);
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return Container(
width: width,
child: Column(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
DataTable(
columnSpacing: 5,
dataRowHeight: 80,
horizontalMargin: 0,
columns: [
DataColumn(
label: Text('Notes', style: boldTextStyle),
),
DataColumn(
label: Text('Price', style: boldTextStyle),
),
DataColumn(label: Text('Extras', style: boldTextStyle)),
DataColumn(label: Text('Size', style: boldTextStyle)),
DataColumn(
label: Text('Amount', style: boldTextStyle),
),
DataColumn(
label: Text('Order Name', style: boldTextStyle),
),
],
rows: [
DataRow(cells: [
// TODO : Make this note icon dynamic
DataCell(
Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 5.0),
child: Image.asset(
'assets/icon/report.png',
height: 25,
width: 25,
),
),
Positioned(
left: 20,
child: CircleAvatar(
backgroundColor: Colors.red,
radius: 5,
),
)
],
),
onTap: () => showDialog(
context: context,
builder: (ctx) {
return AlertDialog(
content: Text('Some random order details'),
title: Text('Notes on order', textDirection: TextDirection.rtl),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(ctx).pop(),
child: Text('Ok'),
)
],
);
})),
// TODO : This a static data cell for price of order
DataCell(Text('150')),
// TODO : This a static data cell for size of order
DataCell(Text('Big')),
// TODO : This a static data cell additives of order
DataCell(Text('Just random additives')),
// TODO : This a static data cell for amount of items of order
DataCell(Text('4')),
// TODO : Make order name dynamic
DataCell(
Container(
width: 70,
height: 100,
padding: EdgeInsets.only(right: 1),
alignment: Alignment.centerLeft,
child: AutoSizeText(
'Pizza',
minFontSize: 12,
maxFontSize: 18,
maxLines: 4,
overflow: TextOverflow.ellipsis,
),
),
onTap: () => showDialog(
context: context,
builder: (ctx) {
return AlertDialog(
content: Text(
'Pizza with details'),
title: Text('Total Order',),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(ctx).pop(),
child: Text('Ok'),
)
],
);
}))
]),
dataRow(context),
dataRow(context),
dataRow(context),
dataRow(context),
dataRow(context),
],
),
Padding(
padding: const EdgeInsets.only(top: 10.0, right: 10),
child: Row(
children: <Widget>[
Text(
'From : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
// TODO : Put restaurant name here
Text('Some random restaurant'),
Spacer(),
ButtonBar(
children: <Widget>[
// TODO : Put restaurant location to open it using url launcher
OrderFromIcon(
backgroundColor: Color(0xFF39D6C1),
onPressed: () {
print('Restaurant location is clicked');
},
icon: Icons.location_on,
borderRadius: 5,
iconColor: Colors.white,
width: 35,
height: 35,
iconSize: 16,
),
// TODO : Put restaurant number to open it using url launcher
OrderFromIcon(
backgroundColor: Color(0xFFFFD200),
onPressed: () {
print('Restaurant number is clicked');
},
icon: Icons.call,
borderRadius: 5,
iconColor: Colors.white,
width: 35,
height: 35,
iconSize: 16,
),
],
)
],
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0, right: 10),
child: Row(
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'Address: ',
style: boldTextStyle,
textDirection: TextDirection.rtl,
),
Container(
width: width * 0.8,
// TODO : Put here restaurant address
child: Text(
'some random address',
))
],
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0, right: 10),
child: Row(
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'Order price : ',
style: boldTextStyle,
),
Container(
// TODO : Put here order price here and make it text field if it was 'others'
// order.
child: Text('124567844',
textDirection: TextDirection.rtl,
style: TextStyle(color: Color(0xFFFF6E6E))))
],
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0, right: 10),
child: Row(
children: <Widget>[
Text(
'Discount: ',
style: boldTextStyle,
),
Container(
// TODO : Put here order price here and make it text field if it was 'others'
// order.
child: Text(
'10 pounds',
style: TextStyle(color: Color(0xFFFF6E6E)),
))
],
),
),
],
),
Spacer(),
Column(
children: <Widget>[
Divider(
height: 1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// TODO : Make a bloc for these two buttons
CustomCheckBox(
onChanged: (value) {},
value: false,
title: 'We got your order !',
activeColor: Color(0xFF0A46D7),
),
CustomCheckBox(
onChanged: (value) {},
value: true,
title: 'Order is being prepared',
activeColor: Color(0xFF0A46D7),
),
],
)
],
)
],
),
);
}
}
这里是OrderFromIcon
class OrderFromIcon extends StatelessWidget {
final double width;
final double height;
final IconData icon;
final Color backgroundColor;
final double borderRadius;
final Color iconColor;
final double iconSize;
final Function onPressed;
OrderFromIcon(
{this.width,
this.height,
@required this.icon,
@required this.backgroundColor,
@required this.borderRadius,
@required this.iconColor,
@required this.onPressed,
this.iconSize});
@override
Widget build(BuildContext context) {
return Container(
height: height,
width: width,
decoration:
BoxDecoration(color: backgroundColor, borderRadius: BorderRadius.circular(borderRadius)),
child: IconButton(
onPressed: onPressed,
icon: Icon(
icon,
size: iconSize,
),
color: iconColor,
),
);
}
}
这里是CustomCheckBox
:
class CustomCheckBox extends StatelessWidget {
final String title;
final Function onChanged;
final bool value;
final Color activeColor;
final double backgroundWidth;
final double backgroundHeight;
CustomCheckBox(
{@required this.title,
@required this.onChanged,
@required this.value,
this.activeColor,
this.backgroundWidth,
this.backgroundHeight});
@override
Widget build(BuildContext context) {
return Container(padding: EdgeInsets.only(left : 12,right: 12),
color: value ? Color(0xFFFFD200).withOpacity(0.2) : Colors.white,
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
title,
style: boldTextStyle,
),
Checkbox(
value: value,
activeColor: Color(0xFF0A46D7),
onChanged: onChanged,
),
],
),
);
}
}
所以在GenericOrderItem
中,标签的高度不同,所以我想动态地更改标签的高度,有什么想法吗?
注意:在您为class GenericOrderItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return Container(
width: width,
height: height,
child: Column(
children: <Widget>[
Column(
textDirection: TextDirection.rtl,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10.0, right: 10),
child: Row(
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'From: ',
style: TextStyle(fontWeight: FontWeight.bold),
),
// TODO : Put restaurant name here
Text('Random Restaurant'),
Spacer(),
ButtonBar(
children: <Widget>[
// TODO : Put restaurant location to open it using url launcher
OrderFromIcon(
backgroundColor: Color(0xFF39D6C1),
onPressed: () {
print('Restaurant location is clicked');
},
icon: Icons.location_on,
borderRadius: 5,
iconColor: Colors.white,
width: 35,
height: 35,
iconSize: 16,
),
// TODO : Put restaurant number to open it using url launcher
OrderFromIcon(
backgroundColor: Color(0xFFFFD200),
onPressed: () {
print('Restaurant number is clicked');
},
icon: Icons.call,
borderRadius: 5,
iconColor: Colors.white,
width: 35,
height: 35,
iconSize: 16,
),
],
)
],
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0, right: 10),
child: Row(
children: <Widget>[
Text(
'Address: ',
style: boldTextStyle,
textDirection: TextDirection.rtl,
),
Container(
width: width * 0.8,
// TODO : Put here restaurant address
child: Text(
'Random address',
textDirection: TextDirection.rtl,
))
],
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0, right: 10),
child: Row(
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'Order price : ',
style: boldTextStyle,
textDirection: TextDirection.rtl,
),
Container(
// TODO : Put here order price here and make it text field if it was 'others'
// order.
child: Text('124567844',
textDirection: TextDirection.rtl,
style: TextStyle(color: Color(0xFFFF6E6E))))
],
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0, right: 10),
child: Row(
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'Discount : ',
style: boldTextStyle,
textDirection: TextDirection.rtl,
),
Container(
// TODO : Put here order price here and make it text field if it was 'others'
// order.
child: Text(
'10 pounds',
textDirection: TextDirection.rtl,
style: TextStyle(color: Color(0xFFFF6E6E)),
))
],
),
),
],
),
Spacer(),
Column(
children: <Widget>[
Divider(
height: 1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// TODO : Make a bloc for these two buttons
CustomCheckBox(
onChanged: (value) {},
value: false,
title: 'Order has been received',
activeColor: Color(0xFF0A46D7),
),
CustomCheckBox(
onChanged: (value) {},
value: true,
title: 'Order is being prepared',
activeColor: Color(0xFF0A46D7),
),
],
)
],
)
],
),
);
}
}
指定高度之前,上面的代码将不起作用,并且所有选项卡的高度都将变为静态高度。