在我的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)、];
1条答案
按热度按时间ifmq2ha21#
尝试将你的按钮和表单 Package 在同一个小部件中。你可以参考this教程来获得帮助。