在列表组件之间设置固定边距

问题描述

我在我的代码中使用了 Material UI 列表组件。

这是代码片段：

void _reorderData(BuildContext ctx,order) async {
    var data;
    var url = 'serverAddress/${order['facts']}';
   
    await http.get(url).then((value) {
      data = jsonDecode(value.body);
      data[0]['CORPORATION'] = order['corporation'];

      showModalBottomSheet(
          context: ctx,builder: (_) {
            return ReorderModal(data);
          });
    }).catchError((onError) {});
  }

class ReorderModal extends StatelessWidget {
  final List data;
  ReorderModal(this.data);
  
  void orderSend(orderInfo) async {        
    var url = 'serverAddress';

    await http.post(url,body: orderInfo[0]).then((value) {

      print(jsonDecode(value.body));

    }).catchError((onError) {
      
      print(onError);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),child: Column(children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
                child: Column(
              children: [                        
        ElevatedButton(
            onpressed: () {
              orderSend(data);
              //print(data);
            },child: Text('ONE Click'))
      ]),);
  }
}

结果截图如下：

如何设置“Hello”和“John”之间的固定距离？

并避免以下情况：

解决方法

// just add minWidth in button 

     <List>
        <ListItem button>
          <ListItemText
            style={{minWidth:"50px" }}
            disableTypography
            primary={<Typography>Hello</Typography>}
          />
          <p>John</p>
          <DraftsIcon />
        </ListItem>
      </List>

你也可以这样做：

import React from 'react';
import Box from '@material-ui/core/Box';
import { IconButton,Typography } from '@material-ui/core';
import DraftsIcon from "@material-ui/icons/Drafts";

export default function FlexGrow() {
  return (
      <Box display="flex" p={1} >
        <Box p={1} flexGrow={1} >
        <Typography variant="button" display="block" gutterBottom>
          Hello
        </Typography>
        </Box>
        <Box p={1} >
        <Typography variant="button" display="block" gutterBottom>
          John
        </Typography>
        </Box>
      <IconButton color="inherit" style={{marginTop :"-10px"}}>
        <DraftsIcon/>
        </IconButton>
      </Box>
  );
}