如何动态设置TabBarView的选项卡高度

时间:2020-04-20 22:01:40

标签: flutter dart

我遇到一个问题,我想呈现不同高度的不同标签:

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), ), ], ) ], ) ], ), ); } } 指定高度之前,上面的代码将不起作用,并且所有选项卡的高度都将变为静态高度。

0 个答案:

没有答案