如何在Flutter中将一个widget与另一个widget的动态宽度对齐?

owfi6suc  于 2023-03-24  发布在  Flutter
关注(0)|答案(1)|浏览(182)

在我的Web应用程序中,我有几个页面显示具有不同列和表宽度的DataTables。在每个表下,我有一个可共享的Navigator类和一个用于插入记录的图标按钮“+”。它看起来是这样的:

我如何定位“添加图标”,这是在底部的权利,现在,结束,对齐右表的结束?
附带问题:我可以改变颜色,甚至图标的排序图标?
下面是我的代码:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Web App'),
      ),
      body: Container(
          width: MediaQuery.of(context).size.width,
          height: (MediaQuery.of(context).size.height * 0.78),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  height: 30,
                  width: 300,
                  child: TextField(
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Search...',
                        prefixIcon: Icon(Icons.search)),
                    controller: _SearchItemController,
                    focusNode: SearchItemFocusNode,
                  ),
                ),
                SizedBox(height: 10),
                DataTable(
                  border: TableBorder.all(
                    width: 0.2),
                  headingRowColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
                    return Styles.TableHeaderColor;
                  }),  // Use the default value.
                  columns: getColumns(TableTitles),
                  rows: getRows(),
                  sortColumnIndex: sortColumnIndex,
                  sortAscending: isAscending,
                  dataRowHeight: 50,
                  headingRowHeight: 40,
                ),
                SizedBox(height: 20),
                Row(
                    children: [
                        Expanded(
                          child: PageNavigator(currentPage, totalPages,
                              totalRecords, _pageController, this),
                        ),
                      IconButton(
                            icon: const Icon(Icons.add),
                            tooltip: 'Add Record',
                            onPressed: () {},
                      )
                    ],
                  ),
              ],
            ),
          )),
    );
  }
}

DataTable的宽度在TableTitles类中设置,在不同的页面中是不同的:
List TableTitles = [ TableTitle(title:“ID”,宽度:50)、TableTitle(title:'中文名称',宽度:120)、TableTitle(title:'英语名',宽度:300)、TableTitle(title:“区域”,宽度:200)、TableTitle(title:'编辑',宽度:60)、TableTitle(title:'删除',宽度:60)、];

ifmq2ha2

ifmq2ha21#

尝试将你的按钮和表单 Package 在同一个小部件中。你可以参考this教程来获得帮助。

相关问题