flutter 单、双排按钮及选择联动ui

效果图

以下为ui的代码

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:onedom_oa_app/common/apis/visit.dart';
import 'package:onedom_oa_app/common/dto/visit/visit_response.dart';
import 'package:onedom_oa_app/common/utils/screen.dart';
import 'package:onedom_oa_app/pages/visit/visit_add/widget/build_transparent_app_bar.dart';
import 'package:url_launcher/url_launcher.dart';

import 'logic.dart';
import 'state.dart';

class VisitAddPage extends StatelessWidget {
  final VisitAddLogic logic = Get.put(VisitAddLogic());
  final VisitAddState state = Get.find<VisitAddLogic>().state;
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildTransparentAppBar(),
      body: Obx(()=>ListView(
        children: [
          Card(
            margin: EdgeInsets.all(10),

            child: Container(
              padding: EdgeInsets.all(30),
              child: Form(
                key: formKey,
                child: Column(
                  children: [
                    /// 客户
                    Container(
                      padding: EdgeInsets.only(bottom: 25),
                      child: Obx(()=>DropdownButtonFormField<String>(
                        // isDense: true,
                        isExpanded: true,
                        decoration: InputDecoration(
                          labelText: "客户",
                          hintText: "请选择客户",
                          border: OutlineInputBorder(),
                          // border: InputBorder.none
                        ),
                        items: [
                          ...(){
                            List<DropdownMenuItem<String>>? temp = <DropdownMenuItem<String>>[];
                            state.myCustomerDataRxList.forEach((item) {
                              temp.add(DropdownMenuItem<String>(child: Text(item.name??""),value: item.id,));
                            });
                            return temp;
                          }.call(),
                        ],
                        onChanged: (val) {
                          state.visitRequest.value.clientId = val;
                          state.visitRequest.value.contactsId = null;
                          state.visitRequest.refresh();
                        },
                        validator: (val){
                          if(val == null){
                            return "请选择客户";
                          }
                          return null;
                        },
                      )),
                    ),


                    /// 联系人
                    Visibility(
                      visible: state.visitRequest.value.clientId?.isEmpty == false,
                      child: Container(
                        padding: EdgeInsets.only(bottom: 25),
                        child: Obx(()=>DropdownButtonFormField<String>(
                          isExpanded: true,
                          value: state.visitRequest.value.contactsId,
                          // isDense: false,
                          decoration: InputDecoration(
                            labelText: "联系人",
                            hintText: "请选择联系人",
                            border: OutlineInputBorder(),
                            // border: InputBorder.none,
                          ),
                          items: [
                            ...(){
                              List<DropdownMenuItem<String>>? temp = <DropdownMenuItem<String>>[];
                              state.myContactsDataRxList.where((item) => item.clientId == state.visitRequest.value.clientId).toList().forEach((item) {
                                temp.add(DropdownMenuItem<String>(child: Text(item.name??""),value: item.id,));
                              });
                              return temp;
                            }.call(),
                          ],
                          onChanged: (val) {
                            state.visitRequest.value.contactsId = val;
                            state.visitRequest.refresh();
                          },
                          onTap: (){
                          },
                          validator: (val){
                            if(val == null){
                              return "请选择联系人";
                            }
                            return null;
                          },
                        )),
                      ),
                    ),

                    /// 标题
                    // Container(
                    //   padding: EdgeInsets.only(bottom: 10),
                    //   child: TextFormField(
                    //     // controller: nameController,
                    //     decoration: InputDecoration(
                    //         hintText: "请输入标题内容",
                    //         border: InputBorder.none
                    //     ),
                    //     onChanged: (val){
                    //       state.visitRequest.value.title = val;
                    //     },
                    //     validator: (val){
                    //       if(val == null||val.isEmpty == true){
                    //         return "请输入标题内容";
                    //       }
                    //       return null;
                    //     },
                    //   ),
                    // ),

                    /// 内容
                    Container(
                      padding: EdgeInsets.only(bottom: 25),
                      child: TextFormField(
                        maxLines: 4,
                        // controller: nameController,
                        decoration: InputDecoration(
                          labelText: "内容",
                          isDense: false,
                          hintText: "请输入拜访内容",
                          border: OutlineInputBorder(),
                          focusedBorder: OutlineInputBorder(),
                          // border: InputBorder.none,
                        ),
                        onChanged: (val){
                          state.visitRequest.value.content = val;
                        },
                        validator: (val){
                          if(val == null||val.isEmpty == true){
                            return "请输入拜访内容";
                          }
                          return null;
                        },
                      ),
                    ),

                    // 重置按钮
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          // 设置按钮的高度和宽度
                          height: duSetHeight(40),
                          width: duSetWidth(150),
                          child: ElevatedButton(
                              style: ButtonStyle(
                                // 按钮的背景颜色
                                backgroundColor: MaterialStateProperty.all(Colors.grey.shade500),
                                // 按钮文字的颜色
                                foregroundColor:MaterialStateProperty.all(Colors.white),
                                // 按钮的阴影
                                elevation: MaterialStateProperty.all(4.0),
                              ),
                              onPressed: () {
                                FormState? _formState = formKey.currentState;
                                _formState?.reset();
                              },
                              child: Text("重置")
                          ),
                        ),
                        Spacer(),
                        Container(
                          // 设置按钮的高度和宽度
                          height: duSetHeight(40),
                          width: duSetWidth(150),
                          child: ElevatedButton(
                              style: ButtonStyle(
                                // 按钮的背景颜色
                                backgroundColor: MaterialStateProperty.all(Colors.green.shade500),
                                // 按钮文字的颜色
                                foregroundColor:MaterialStateProperty.all(Colors.white),
                                // 按钮的阴影
                                elevation: MaterialStateProperty.all(4.0),
                              ),
                              onPressed: () async {
                                FormState? _formState = formKey.currentState;
                                if(_formState?.validate() ?? false){
                                  VisitResponse visitResponse = await VisitAPI.add(visitRequest: state.visitRequest.value);
                                  if(visitResponse.success ?? false){
                                    Future.delayed(Duration(seconds: 1), () => Get.snackbar(
                                      "提示",
                                      "新增成功",
                                      colorText: Colors.white,
                                      backgroundColor:Colors.green,
                                    ));
                                  }else{
                                    Future.delayed(Duration(seconds: 1), () => Get.snackbar(
                                      "提示",
                                      visitResponse.message??"",
                                      colorText: Colors.white,
                                      backgroundColor:Colors.orange,
                                    ));
                                  }
                                  Get.back(result:"refresh");
                                }
                              },
                              child: Text("提交")
                          ),
                        ),
                      ],
                    ),

                    // 提交按钮
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Expanded(
                          child: Container(
                            // 设置按钮的高度和宽度
                            height: 50,
                            width: 300,
                            // 边距
                            margin: EdgeInsets.only(top:10),
                            child: ElevatedButton(
                                style: ButtonStyle(
                                  // 按钮的背景颜色
                                  backgroundColor: MaterialStateProperty.all(Colors.green.shade500),
                                  // 按钮文字的颜色
                                  foregroundColor:MaterialStateProperty.all(Colors.white),
                                  // 按钮的阴影
                                  elevation: MaterialStateProperty.all(4.0),
                                ),
                                onPressed: () async {
                                  FormState? _formState = formKey.currentState;
                                  if(_formState?.validate() ?? false){
                                    VisitResponse visitResponse = await VisitAPI.add(visitRequest: state.visitRequest.value);
                                    if(visitResponse.success ?? false){
                                      Future.delayed(Duration(seconds: 1), () => Get.snackbar(
                                        "提示",
                                        "新增成功",
                                        colorText: Colors.white,
                                        backgroundColor:Colors.green,
                                      ));
                                    }else{
                                      Future.delayed(Duration(seconds: 1), () => Get.snackbar(
                                        "提示",
                                        visitResponse.message??"",
                                        colorText: Colors.white,
                                        backgroundColor:Colors.orange,
                                      ));
                                    }
                                    Get.back(result:"refresh");
                                  }
                                },
                                child: Text("提交")
                            ),
                          ),
                        ),
                      ],
                    ),

                    /// 提交和重置按钮
                    // Container(
                    //   child: Row(
                    //     mainAxisAlignment:MainAxisAlignment.spaceBetween,
                    //     children: [
                    //       ElevatedButton(onPressed: (){
                    //         FormState? _formState = formKey.currentState;
                    //         _formState?.reset();
                    //       },
                    //         child: Text("重置"),
                    //         style: ButtonStyle(
                    //           // 按钮的背景颜色
                    //           backgroundColor: MaterialStateProperty.all(Colors.grey),
                    //           // 按钮文字的颜色
                    //           foregroundColor:MaterialStateProperty.all(Colors.white),
                    //           // 按钮的阴影
                    //           elevation: MaterialStateProperty.all(4.0),
                    //         ),
                    //
                    //       ),
                    //       ElevatedButton(onPressed: () async {
                    //         // FormState? _formState = Form.of(context);
                    //         // if(_state!.validate()){
                    //         //   _state.save();
                    //         //
                    //         // }
                    //         FormState? _formState = formKey.currentState;
                    //         if(_formState?.validate() ?? false){
                    //           VisitResponse visitResponse = await VisitAPI.add(visitRequest: state.visitRequest.value);
                    //           if(visitResponse.success ?? false){
                    //             Future.delayed(Duration(seconds: 1), () => Get.snackbar(
                    //               "提示",
                    //               "新增成功",
                    //               colorText: Colors.white,
                    //               backgroundColor:Colors.green,
                    //             ));
                    //           }else{
                    //             Future.delayed(Duration(seconds: 1), () => Get.snackbar(
                    //               "提示",
                    //               visitResponse.message??"",
                    //               colorText: Colors.white,
                    //               backgroundColor:Colors.orange,
                    //             ));
                    //           }
                    //           Get.back(result:"refresh");
                    //         }
                    //       },
                    //         child: Text("提交"),
                    //         style: ButtonStyle(
                    //           // 按钮的阴影
                    //           elevation: MaterialStateProperty.all(3.0),
                    //         ),
                    //       ),
                    //     ],
                    //   ),
                    // ),
                  ],
                ),
              ),
            ),
          ),

        ],
      )),

    );
  }
}