flutter 如何在抽屉中对齐扩展块中的子标题?

cyej8jka  于 2023-03-04  发布在  Flutter
关注(0)|答案(3)|浏览(163)

我有一个ExpansionTile在一个ListView在一个Drawer中..我希望副标题直接在其主标题下对齐,下面的gif显示当前状态..

Scaffold(
  appBar: AppBar(title: Text(title)),
  body: Center(child: Text('My Page!')),
  drawer: Drawer(
    // Add a ListView to the drawer. This ensures the user can scroll
    // through the options in the Drawer if there isn't enough vertical
    // space to fit everything.
    child: ListView(
      // Important: Remove any padding from the ListView.
      // padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Text('Drawer Header'),
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
        ),
        ExpansionTile(
          title: Text('Item0'),
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('subHeading1'),
            ),
            Text('subheading2')
          ],
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            // Update the state of the app
            // ...
            // Then close the drawer
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            // Update the state of the app
            // ...
            // Then close the drawer
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
);
pgky5nke

pgky5nke1#

这应该可以解决这个问题:

ExpansionTile(
      title: Text('Item0'),
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Align(
            alignment: Alignment.topLeft,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text('subHeading1'),
                Text('subHeading2')
              ],
            ),
          ),
        ),
      ],
    ),
aelbi1ox

aelbi1ox2#

您可以使用容器填充和对齐:

ExpansionTile(
      title: Text('Item0'),
      children: <Widget>[
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.topLeft,
          child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text('subHeading1'),
                Text('subHeading2')
              ],
          ),
        ),
      ],
    ),
holgip5t

holgip5t3#

ExpansionTile(
                 title:const Text('Subscriber Information'),
                collapsedBackgroundColor:
Colors.green.withOpacity(0.20),
                 backgroundColor: Colors.green.withOpacity(0.10) ,
                 onExpansionChanged: (bool change){},
                 childrenPadding:const EdgeInsets.all(16),
expandedCrossAxisAlignment: CrossAxisAlignment.start,
                 expandedAlignment: Alignment.topLeft,
                 children: [
                   Text('Ticket Id ${controller.ticketData.trackingInfo}'),
                   Text('Ticket Id ${controller.ticketData.trackingInfo}'),
                   Text('Ticket Id ${controller.ticketData.trackingInfo}'),
                   Text('Ticket Id ${controller.ticketData.trackingInfo}'),
                 ],
               ),

相关问题