目前我尝试建立一个聊天栏。
类似于这个例子:
我的问题是,如果我添加一些行文本,则图标不在按钮上。
我的例子:
我尝试将对齐更改为按钮,但它不起作用。
这是我的第一个例子:
//chat bar
class BuildAppChatBar extends StatefulWidget {
BuildAppChatBar();
@override
_BuildAppChatBar createState() => _BuildAppChatBar();
}
//chat bar
class _BuildAppChatBar extends State<BuildAppChatBar> {
_BuildAppChatBar();
TextEditingController _controller_text_field = new TextEditingController();
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: Card(
color: Colors.white60,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(36.0),
),
child: TextField(
//keyboardType: TextInputType.,
//disable underline
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
//emoji
//alignment: Alignment.bottomCenter,
prefixIcon: Padding(
padding: const EdgeInsets.only(
left: 0, top: 0, right: 0, bottom: 100),
child: IconButton(
icon: Icon(
Icons.tag_faces,
color: Colors.black45,
),
onPressed: () {},
),
),
//attachment / camera
suffixIcon: Container(
width: MediaQuery.of(context).size.width * 0.26,
child: Row(
children: [
//attachment
IconButton(
onPressed: () {
print('add button pressed');
_loadLocalFile();
},
icon: Icon(
Icons.attachment,
color: Colors.black45,
),
),
//camera
IconButton(
onPressed: () async {
//take image from camera
var image_camera = await _takeImageCamera(context);
setState(() {
//take image filde
var image_file = File(image_camera!.path);
});
},
icon: Icon(
Icons.camera_alt_rounded,
color: Colors.black45,
),
),
],
),
),
//hint text
hintStyle: TextStyle(
color: Colors.black45,
),
contentPadding: EdgeInsets.only(
left: MediaQuery.of(context).size.width * 0.07,
top: MediaQuery.of(context).size.height * 0.022),
hintText: "Message"),
),
),
),
//voice recorder
Container(
width: MediaQuery.of(context).size.width * 0.12,
height: MediaQuery.of(context).size.height * 0.07,
//decorations
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.greenAccent.shade200,
),
//icon
child: IconButton(
onPressed: () {
setState(() {});
},
icon: Icon(
Icons.keyboard_voice_sharp,
color: Colors.black45,
),
),
),
],
);
}
}
这是我的第二个例子:
//chat bar
class BuildAppChatBarNew extends StatefulWidget {
BuildAppChatBarNew();
@override
_BuildAppChatBarNew createState() => _BuildAppChatBarNew();
}
//chat bar
class _BuildAppChatBarNew extends State<BuildAppChatBarNew> {
TextEditingController _controller_text_field = new TextEditingController();
@override
Widget build(BuildContext context) {
return Row(
children: [
//text field
Expanded(
child: Card(
color: Colors.white60,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(36.0),
),
child: Row(
children: [
//emoji
Container(
child: IconButton(
icon: Icon(
Icons.tag_faces,
color: Colors.black45,
),
onPressed: () {},
),
),
//text field
Expanded(
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
//hint text
hintStyle: TextStyle(
color: Colors.black45,
),
hintText: "Message"),
),
),
//attachment / camera
Container(
width: MediaQuery.of(context).size.width * 0.26,
child: Row(
children: [
//attachment
IconButton(
onPressed: () {
print('add button pressed');
_loadLocalFile();
},
icon: Icon(
Icons.attachment,
color: Colors.black45,
),
),
//camera
IconButton(
onPressed: () async {
//take image from camera
var image_camera = await _takeImageCamera(context);
setState(() {
//take image filde
var image_file = File(image_camera!.path);
});
},
icon: Icon(
Icons.camera_alt_rounded,
color: Colors.black45,
),
),
],
),
),
],
),
),
),
//voice recorder
Container(
width: MediaQuery.of(context).size.width * 0.12,
height: MediaQuery.of(context).size.height * 0.07,
//decorations
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.greenAccent.shade200,
),
//icon
child: IconButton(
onPressed: () {
setState(() {});
},
icon: Icon(
Icons.keyboard_voice_sharp,
color: Colors.black45,
),
),
),
],
);
}
}
任何人都知道如何将图标设置为底部对齐?那可能吗?
很多谢谢