如何在ResponsiveDatatable中实现多行标题按钮布局？

不需要给ResponsiveDatatable加不支持的child属性，这个组件的title参数本身可以接收任意类型的Widget，不是只能传单行Row，直接把多行布局容器传给title就能实现需求，完全不影响组件原有表格功能。

具体修改步骤 #

• 把原来传给title属性的单行Row，替换为Column组件
• 在Column的children里分开放置两行按钮的Row，第一行放「Hinzufügen」「Bearbeiten」按钮，第二行放剩下的「Sperren」「Freischalten」「Löschen」按钮
• 给Column设置mainAxisSize: MainAxisSize.min，避免组件无谓占满纵向多余空间
• 两行按钮之间可以加SizedBox(height: 12)控制行间距

修改后的核心代码片段 #

child: ResponsiveDatatable(
  title: Column(
    mainAxisSize: MainAxisSize.min, // 关键配置，避免撑开多余高度
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // 第一行按钮
      Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // Hinzufügen按钮
          TextButton.icon(
            onPressed: () => {
              Navigator.of(context).pushNamed(RegristrationRoute)
            },
            icon: Icon(Icons.add, color: Colors.black,),
            label: Text("Hinzufügen", style: TextStyle(color: Colors.black)),
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.grey),
              padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(10)),
            ),
          ),
          SizedBox(width: 30,),
          // Bearbeiten按钮
          TextButton.icon(
            onPressed: () => {
              Navigator.of(context).pushNamed(RegristrationRoute)
            },
            icon: Icon(IconData(0xf00d, fontFamily: 'MaterialIcons'), color: Colors.black),
            label: Text("Bearbeiten", style: TextStyle(color: Colors.black)),
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.grey),
              padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(10)),
            ),
          ),
        ],
      ),
      SizedBox(height: 12), // 两行按钮的纵向间距
      // 第二行按钮
      Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(width: 30,),
          // Sperren按钮
          TextButton.icon(
            onPressed: () => {},
            icon: Icon(IconData(0xe3b1, fontFamily: 'MaterialIcons'), color: Colors.black),
            label: Text("Sperren", style: TextStyle(color: Colors.black)),
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.grey),
              padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(10)),
            ),
          ),
          SizedBox(width: 30,),
          // Freischalten按钮
          TextButton.icon(
            onPressed: () => {},
            icon: Icon(IconData(0xe3b0, fontFamily: 'MaterialIcons'), color: Colors.black),
            label: Text("Freischalten", style: TextStyle(color: Colors.black)),
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.grey),
              padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(10)),
            ),
          ),
          SizedBox(width: 30,),
          // Löschen按钮
          TextButton.icon(
            onPressed: () async => {
              await AuthProvider.deleteUser(uid),
              print(uid + 'user gelöscht')
            },
            icon: Icon(IconData(0xe1bb, fontFamily: 'MaterialIcons'), color: Colors.black),
            label: Text("Löschen", style: TextStyle(color: Colors.black)),
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.grey),
              padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(10)),
            ),
          ),
        ],
      )
    ],
  ),
  // ResponsiveDatatable其余原有参数（列配置、数据源等）保持不变即可
)

适配优化提示 #

如果需要适配更小宽度的屏幕，避免单行按钮横向溢出，可以把每行装按钮的Row换成Wrap组件，设置alignment: WrapAlignment.center、spacing: 30（横向按钮间距）、runSpacing: 10（纵向换行间距），按钮会根据可用宽度自动换行，不用手动拆分固定两行，响应式适配效果更好。

内容的提问来源于stack exchange，提问作者albaum